Unified loading states.

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

@@ -3,33 +3,36 @@ import { useWebsiteSessionStatsQuery } from '@/components/hooks/queries/useWebsi
 import { MetricCard } from '@/components/metrics/MetricCard';
 import { MetricsBar } from '@/components/metrics/MetricsBar';
 import { formatLongNumber } from '@/lib/format';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
 
 export function SessionsMetricsBar({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
-  const { data, isLoading, isFetched, error } = useWebsiteSessionStatsQuery(websiteId);
+  const { data, isLoading, isFetching, error } = useWebsiteSessionStatsQuery(websiteId);
 
   return (
-    <MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
-      <MetricCard
-        value={data?.visitors?.value}
-        label={formatMessage(labels.visitors)}
-        formatValue={formatLongNumber}
-      />
-      <MetricCard
-        value={data?.visits?.value}
-        label={formatMessage(labels.visits)}
-        formatValue={formatLongNumber}
-      />
-      <MetricCard
-        value={data?.pageviews?.value}
-        label={formatMessage(labels.views)}
-        formatValue={formatLongNumber}
-      />
-      <MetricCard
-        value={data?.countries?.value}
-        label={formatMessage(labels.countries)}
-        formatValue={formatLongNumber}
-      />
-    </MetricsBar>
+    <LoadingPanel data={data} isLoading={isLoading} isFetching={isFetching} error={error}>
+      <MetricsBar>
+        <MetricCard
+          value={data?.visitors?.value}
+          label={formatMessage(labels.visitors)}
+          formatValue={formatLongNumber}
+        />
+        <MetricCard
+          value={data?.visits?.value}
+          label={formatMessage(labels.visits)}
+          formatValue={formatLongNumber}
+        />
+        <MetricCard
+          value={data?.pageviews?.value}
+          label={formatMessage(labels.views)}
+          formatValue={formatLongNumber}
+        />
+        <MetricCard
+          value={data?.countries?.value}
+          label={formatMessage(labels.countries)}
+          formatValue={formatLongNumber}
+        />
+      </MetricsBar>
+    </LoadingPanel>
   );
 }

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

@@ -36,65 +36,70 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
     : [];
 
   return (
-    <LoadingPanel isEmpty={!data?.length} isLoading={isLoading} error={error}>
+    <LoadingPanel data={data} isLoading={isLoading} error={error}>
       <Grid columns="repeat(8, 1fr)" gap>
-        <Grid rows="repeat(25, 20px)" gap="1">
-          <Row>&nbsp;</Row>
-          {Array(24)
-            .fill(null)
-            .map((_, i) => {
-              const label = format(addHours(startOfDay(new Date()), i), 'p', { locale: dateLocale })
-                .replace(/\D00 ?/, '')
-                .toLowerCase();
-              return (
-                <Row key={i} justifyContent="flex-end">
-                  <Text color="muted" weight="bold">
-                    {label}
-                  </Text>
-                </Row>
-              );
-            })}
-        </Grid>
-        {data &&
-          daysOfWeek.map((index: number) => {
-            const day = data[index];
-            return (
-              <Grid
-                rows="repeat(25, 20px)"
-                justifyContent="center"
-                alignItems="center"
-                key={index}
-                gap="1"
-              >
-                <Row>
-                  <Text weight="bold" align="center">
-                    {format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
-                  </Text>
-                </Row>
-                {day?.map((count: number, j) => {
-                  const pct = count / max;
+        {data && (
+          <>
+            <Grid rows="repeat(25, 20px)" gap="1">
+              <Row>&nbsp;</Row>
+              {Array(24)
+                .fill(null)
+                .map((_, i) => {
+                  const label = format(addHours(startOfDay(new Date()), i), 'p', {
+                    locale: dateLocale,
+                  })
+                    .replace(/\D00 ?/, '')
+                    .toLowerCase();
                   return (
-                    <TooltipTrigger key={j} delay={0} isDisabled={count <= 0}>
-                      <Focusable>
-                        <Row backgroundColor="2" width="20px" height="20px" borderRadius="full">
-                          <Row
-                            backgroundColor="primary"
-                            width="20px"
-                            height="20px"
-                            borderRadius="full"
-                            style={{ opacity: pct, transform: `scale(${pct})` }}
-                          />
-                        </Row>
-                      </Focusable>
-                      <Tooltip placement="right">{`${formatMessage(
-                        labels.visitors,
-                      )}: ${count}`}</Tooltip>
-                    </TooltipTrigger>
+                    <Row key={i} justifyContent="flex-end">
+                      <Text color="muted" weight="bold">
+                        {label}
+                      </Text>
+                    </Row>
                   );
                 })}
-              </Grid>
-            );
-          })}
+            </Grid>
+            {daysOfWeek.map((index: number) => {
+              const day = data[index];
+              return (
+                <Grid
+                  rows="repeat(24, 20px)"
+                  justifyContent="center"
+                  alignItems="center"
+                  key={index}
+                  gap="1"
+                >
+                  <Row marginBottom="3">
+                    <Text weight="bold" align="center">
+                      {format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
+                    </Text>
+                  </Row>
+                  {day?.map((count: number, j) => {
+                    const pct = count / max;
+                    return (
+                      <TooltipTrigger key={j} delay={0} isDisabled={count <= 0}>
+                        <Focusable>
+                          <Row backgroundColor="2" width="20px" height="20px" borderRadius="full">
+                            <Row
+                              backgroundColor="primary"
+                              width="20px"
+                              height="20px"
+                              borderRadius="full"
+                              style={{ opacity: pct, transform: `scale(${pct})` }}
+                            />
+                          </Row>
+                        </Focusable>
+                        <Tooltip placement="right">{`${formatMessage(
+                          labels.visitors,
+                        )}: ${count}`}</Tooltip>
+                      </TooltipTrigger>
+                    );
+                  })}
+                </Grid>
+              );
+            })}
+          </>
+        )}
       </Grid>
     </LoadingPanel>
   );

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

@@ -1,8 +1,20 @@
 import { isSameDay } from 'date-fns';
-import { Icon, StatusLight, Column, Row, Heading, Text, Button } from '@umami/react-zen';
+import {
+  Icon,
+  StatusLight,
+  Column,
+  Row,
+  Heading,
+  Text,
+  Button,
+  DialogTrigger,
+  Popover,
+  Dialog,
+} from '@umami/react-zen';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { Bolt, Eye, FileText } from '@/components/icons';
 import { useSessionActivityQuery, useTimezone } from '@/components/hooks';
+import { EventData } from '@/components/metrics/EventData';
 
 export function SessionActivity({
   websiteId,
@@ -25,7 +37,7 @@ export function SessionActivity({
   let lastDay = null;
 
   return (
-    <LoadingPanel isEmpty={!data?.length} isLoading={isLoading} error={error}>
+    <LoadingPanel data={data} isLoading={isLoading} error={error}>
       <Column gap>
         {data?.map(({ eventId, createdAt, urlPath, eventName, visitId, hasData }) => {
           const showHeader = !lastDay || !isSameDay(new Date(lastDay), new Date(createdAt));
@@ -41,15 +53,7 @@ export function SessionActivity({
                 <Row alignItems="center" gap>
                   <Icon>{eventName ? <Bolt /> : <Eye />}</Icon>
                   <Text>{eventName || urlPath}</Text>
-                  {hasData > 0 && (
-                    <Button variant="quiet">
-                      <Row alignItems="center" gap>
-                        <Icon>
-                          <FileText />
-                        </Icon>
-                      </Row>
-                    </Button>
-                  )}
+                  {hasData > 0 && <PropertiesButton websiteId={websiteId} eventId={eventId} />}
                 </Row>
               </Row>
             </Column>
@@ -59,3 +63,22 @@ export function SessionActivity({
     </LoadingPanel>
   );
 }
+
+const PropertiesButton = props => {
+  return (
+    <DialogTrigger>
+      <Button variant="quiet">
+        <Row alignItems="center" gap>
+          <Icon>
+            <FileText />
+          </Icon>
+        </Row>
+      </Button>
+      <Popover placement="right">
+        <Dialog>
+          <EventData {...props} />
+        </Dialog>
+      </Popover>
+    </DialogTrigger>
+  );
+};

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

@@ -6,10 +6,9 @@ import { LoadingPanel } from '@/components/common/LoadingPanel';
 
 export function SessionData({ websiteId, sessionId }: { websiteId: string; sessionId: string }) {
   const { data, isLoading, error } = useSessionDataQuery(websiteId, sessionId);
-  const isEmpty = !data?.length;
 
   return (
-    <LoadingPanel isEmpty={isEmpty} isLoading={isLoading} error={error}>
+    <LoadingPanel data={data} isLoading={isLoading} error={error}>
       {!data?.length && <Empty />}
       <Column gap="6">
         {data?.map(({ dataKey, dataType, stringValue }) => {

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

@@ -20,7 +20,7 @@ export function SessionDetailsPage({
   const { formatMessage, labels } = useMessages();
 
   return (
-    <LoadingPanel isLoading={isLoading} error={error}>
+    <LoadingPanel data={data} isLoading={isLoading} error={error}>
       <Grid columns="260px 1fr" gap>
         <Column gap="6">
           <Row justifyContent="center">
@@ -28,7 +28,6 @@ export function SessionDetailsPage({
           </Row>
           <SessionInfo data={data} />
         </Column>
-
         <Column gap>
           <SessionStats data={data} />
           <Panel>

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

@@ -7,7 +7,7 @@ export function SessionStats({ data }) {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <MetricsBar isFetched={true}>
+    <MetricsBar>
       <MetricCard label={formatMessage(labels.visits)} value={data?.visits} />
       <MetricCard label={formatMessage(labels.views)} value={data?.views} />
       <MetricCard label={formatMessage(labels.events)} value={data?.events} />