Fixed session properties.

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx

@@ -1,19 +1,16 @@
-import { Loading, TextOverflow } from 'react-basics';
+import { TextOverflow } from 'react-basics';
 import { useMessages, useSessionData } from 'components/hooks';
 import Empty from 'components/common/Empty';
 import { DATA_TYPES } from 'lib/constants';
 import styles from './SessionData.module.css';
+import { LoadingPanel } from 'components/common/LoadingPanel';
 
 export function SessionData({ websiteId, sessionId }: { websiteId: string; sessionId: string }) {
   const { formatMessage, labels } = useMessages();
-  const { data, isLoading } = useSessionData(websiteId, sessionId);
-
-  if (isLoading) {
-    return <Loading icon="dots" size="sm" />;
-  }
+  const { data, ...query } = useSessionData(websiteId, sessionId);
 
   return (
-    <div className={styles.data}>
+    <LoadingPanel className={styles.data} {...query} data={data}>
       <div className={styles.header}>{formatMessage(labels.properties)}</div>
       {!data?.length && <Empty className={styles.empty} />}
       {data?.map(({ dataKey, dataType, stringValue }) => {
@@ -29,6 +26,6 @@ export function SessionData({ websiteId, sessionId }: { websiteId: string; sessi
           </div>
         );
       })}
-    </div>
+    </LoadingPanel>
   );
 }

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx

@@ -2,12 +2,12 @@
 import WebsiteHeader from '../../WebsiteHeader';
 import SessionInfo from './SessionInfo';
 import { useWebsiteSession } from 'components/hooks';
-import { Loading } from 'react-basics';
 import Avatar from 'components/common/Avatar';
 import { SessionActivity } from './SessionActivity';
 import { SessionStats } from './SessionStats';
 import { SessionData } from './SessionData';
 import styles from './SessionDetailsPage.module.css';
+import { LoadingPanel } from 'components/common/LoadingPanel';
 
 export default function SessionDetailsPage({
   websiteId,
@@ -16,14 +16,10 @@ export default function SessionDetailsPage({
   websiteId: string;
   sessionId: string;
 }) {
-  const { data, isLoading } = useWebsiteSession(websiteId, sessionId);
-
-  if (isLoading) {
-    return <Loading position="page" />;
-  }
+  const { data, ...query } = useWebsiteSession(websiteId, sessionId);
 
   return (
-    <>
+    <LoadingPanel {...query} loadingIcon="spinner" data={data}>
       <WebsiteHeader websiteId={websiteId} />
       <div className={styles.page}>
         <div className={styles.sidebar}>
@@ -38,6 +34,6 @@ export default function SessionDetailsPage({
           <SessionData websiteId={websiteId} sessionId={sessionId} />
         </div>
       </div>
-    </>
+    </LoadingPanel>
   );
 }

src/components/common/LoadingPanel.module.css

@@ -2,4 +2,5 @@
   display: flex;
   flex-direction: column;
   position: relative;
+  flex: 1;
 }

src/components/common/LoadingPanel.tsx

@@ -23,7 +23,7 @@ export function LoadingPanel({
   className?: string;
   children: ReactNode;
 }) {
-  const isEmpty = !data?.length && !isLoading && isFetched;
+  const isEmpty = !isLoading && isFetched && data && Array.isArray(data) && data.length > 0;
 
   return (
     <div className={classNames(styles.panel, className)}>

src/components/hooks/queries/useSessionData.ts

@@ -6,7 +6,7 @@ export function useSessionData(websiteId: string, sessionId: string) {
   return useQuery({
     queryKey: ['session:data', { websiteId, sessionId }],
     queryFn: () => {
-      return get(`/sessions/${sessionId}/data`, { websiteId });
+      return get(`/websites/${websiteId}/sessions/${sessionId}/properties`, { websiteId });
     },
   });
 }