From 96fcdefeedc30bd370936eb100397399c8c1609f Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Wed, 18 Jun 2025 20:12:42 -0700
Subject: [PATCH] Updated Goal loading.

---
 .../[websiteId]/reports/goals/Goal.tsx        | 116 +++++++++---------
 1 file changed, 59 insertions(+), 57 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/reports/goals/Goal.tsx b/src/app/(main)/websites/[websiteId]/reports/goals/Goal.tsx
index a3ef7515..e1480491 100644
--- a/src/app/(main)/websites/[websiteId]/reports/goals/Goal.tsx
+++ b/src/app/(main)/websites/[websiteId]/reports/goals/Goal.tsx
@@ -24,7 +24,7 @@ export type GoalData = { num: number; total: number };
 
 export function Goal({ id, name, type, parameters, websiteId, startDate, endDate }: GoalProps) {
   const { formatMessage, labels } = useMessages();
-  const { data, error, isLoading } = useResultQuery<GoalData>(type, {
+  const { data, error, isLoading, isFetching } = useResultQuery<GoalData>(type, {
     websiteId,
     dateRange: {
       startDate,
@@ -35,64 +35,66 @@ export function Goal({ id, name, type, parameters, websiteId, startDate, endDate
   const isPage = parameters?.type === 'page';
 
   return (
-    <LoadingPanel data={data} isLoading={isLoading} error={error}>
-      <Grid gap>
-        <Grid columns="1fr auto" gap>
-          <Column gap>
-            <Row>
-              <Text size="4" weight="bold">
-                {name}
-              </Text>
+    <LoadingPanel data={data} isLoading={isLoading} isFetching={isFetching} error={error}>
+      {data && (
+        <Grid gap>
+          <Grid columns="1fr auto" gap>
+            <Column gap>
+              <Row>
+                <Text size="4" weight="bold">
+                  {name}
+                </Text>
+              </Row>
+            </Column>
+            <Column>
+              <ReportEditButton id={id} name={name} type={type}>
+                {({ close }) => {
+                  return (
+                    <Dialog
+                      title={formatMessage(labels.goal)}
+                      variant="modal"
+                      style={{ minHeight: 300, minWidth: 400 }}
+                    >
+                      <GoalEditForm id={id} websiteId={websiteId} onClose={close} />
+                    </Dialog>
+                  );
+                }}
+              </ReportEditButton>
+            </Column>
+          </Grid>
+          <Row alignItems="center" justifyContent="space-between" gap>
+            <Text color="muted">
+              {formatMessage(isPage ? labels.viewedPage : labels.triggeredEvent)}
+            </Text>
+            <Text color="muted">{formatMessage(labels.conversionRate)}</Text>
+          </Row>
+          <Row alignItems="center" justifyContent="space-between" gap>
+            <Row alignItems="center" gap>
+              <Icon>{parameters.type === 'page' ? <File /> : <Lightning />}</Icon>
+              <Text>{parameters.value}</Text>
             </Row>
-          </Column>
-          <Column>
-            <ReportEditButton id={id} name={name} type={type}>
-              {({ close }) => {
-                return (
-                  <Dialog
-                    title={formatMessage(labels.goal)}
-                    variant="modal"
-                    style={{ minHeight: 300, minWidth: 400 }}
-                  >
-                    <GoalEditForm id={id} websiteId={websiteId} onClose={close} />
-                  </Dialog>
-                );
-              }}
-            </ReportEditButton>
-          </Column>
+            <Row alignItems="center" gap>
+              <Icon>
+                <User />
+              </Icon>
+              <Text title={`${data?.num} / ${data?.total}`}>{`${formatLongNumber(
+                data?.num,
+              )} / ${formatLongNumber(data?.total)}`}</Text>
+            </Row>
+          </Row>
+          <Row alignItems="center" gap="6">
+            <ProgressBar
+              value={data?.num || 0}
+              minValue={0}
+              maxValue={data?.total || 1}
+              style={{ width: '100%' }}
+            />
+            <Text weight="bold" size="7">
+              {data?.total ? Math.round((+data?.num / +data?.total) * 100) : '0'}%
+            </Text>
+          </Row>
         </Grid>
-        <Row alignItems="center" justifyContent="space-between" gap>
-          <Text color="muted">
-            {formatMessage(isPage ? labels.viewedPage : labels.triggeredEvent)}
-          </Text>
-          <Text color="muted">{formatMessage(labels.conversionRate)}</Text>
-        </Row>
-        <Row alignItems="center" justifyContent="space-between" gap>
-          <Row alignItems="center" gap>
-            <Icon>{parameters.type === 'page' ? <File /> : <Lightning />}</Icon>
-            <Text>{parameters.value}</Text>
-          </Row>
-          <Row alignItems="center" gap>
-            <Icon>
-              <User />
-            </Icon>
-            <Text title={`${data?.num} / ${data?.total}`}>{`${formatLongNumber(
-              data?.num,
-            )} / ${formatLongNumber(data?.total)}`}</Text>
-          </Row>
-        </Row>
-        <Row alignItems="center" gap="6">
-          <ProgressBar
-            value={data?.num || 0}
-            minValue={0}
-            maxValue={data?.total || 1}
-            style={{ width: '100%' }}
-          />
-          <Text weight="bold" size="7">
-            {data?.total ? Math.round((+data?.num / +data?.total) * 100) : '0'}%
-          </Text>
-        </Row>
-      </Grid>
+      )}
     </LoadingPanel>
   );
 }