From a16fbd17a8c87b14acdb26ec0d4753ba4b30dca7 Mon Sep 17 00:00:00 2001
From: Ben Senescu <44480372+bensenescu@users.noreply.github.com>
Date: Thu, 23 Jul 2026 09:39:28 -0400
Subject: [PATCH] fix(ui): proper loading states for rank tracking list,
 detail, and dashboard cards (#419)

---
 src/client/features/dashboard/DashboardPage.tsx     |  5 ++++-
 .../rank-tracking/RankTrackingDomainList.tsx        | 13 +++++++++++--
 .../p/$projectId/rank-tracking/$configId.tsx        | 10 ++++++++--
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/client/features/dashboard/DashboardPage.tsx b/src/client/features/dashboard/DashboardPage.tsx
index 576799f..fa18ad8 100644
--- a/src/client/features/dashboard/DashboardPage.tsx
+++ b/src/client/features/dashboard/DashboardPage.tsx
@@ -276,7 +276,10 @@ export function DashboardPage({ projectId }: { projectId: string }) {
     );
   }
 
-  if (!activation) {
+  // Wait for the overview too: rendering cards from `overview === undefined`
+  // flashes their empty states (and reshuffles the data-first sort) once the
+  // real data lands. An overview error falls through so the page still loads.
+  if (!activation || overviewQuery.isPending) {
     return (
       <div
         className="mx-auto flex max-w-5xl flex-col gap-5 px-4 py-4 md:px-6 md:py-6"
diff --git a/src/client/features/rank-tracking/RankTrackingDomainList.tsx b/src/client/features/rank-tracking/RankTrackingDomainList.tsx
index f6ed98a..89eb362 100644
--- a/src/client/features/rank-tracking/RankTrackingDomainList.tsx
+++ b/src/client/features/rank-tracking/RankTrackingDomainList.tsx
@@ -50,7 +50,7 @@ export function RankTrackingDomainList({
   const [filters, setFilters] = useState<DomainListFilters>(
     EMPTY_DOMAIN_LIST_FILTERS,
   );
-  const { data: summaries } = useQuery({
+  const { data: summaries, isPending } = useQuery({
     queryKey: ["rankTrackingConfigSummaries", projectId],
     queryFn: () => getRankTrackingConfigSummaries({ data: { projectId } }),
   });
@@ -106,7 +106,16 @@ export function RankTrackingDomainList({
           />
         )}
         <div className="divide-y divide-base-300 border-t border-base-300">
-          {allSummaries.length === 0 ? (
+          {isPending ? (
+            <div className="space-y-4 px-5 py-4" aria-busy>
+              {Array.from({ length: 3 }).map((_, index) => (
+                <div key={index} className="space-y-2">
+                  <div className="skeleton h-4 w-48" />
+                  <div className="skeleton h-3 w-72" />
+                </div>
+              ))}
+            </div>
+          ) : allSummaries.length === 0 ? (
             <div className="px-5 py-10 text-center space-y-2">
               <div className="mx-auto flex size-10 items-center justify-center rounded-xl bg-base-200">
                 <Globe className="size-5 text-base-content/40" />
diff --git a/src/routes/_project/p/$projectId/rank-tracking/$configId.tsx b/src/routes/_project/p/$projectId/rank-tracking/$configId.tsx
index a93f029..742fcd0 100644
--- a/src/routes/_project/p/$projectId/rank-tracking/$configId.tsx
+++ b/src/routes/_project/p/$projectId/rank-tracking/$configId.tsx
@@ -17,7 +17,7 @@ function RankTrackingConfigRoute() {
   const queryClient = useQueryClient();
   const [showConfigModal, setShowConfigModal] = useState(false);
 
-  const { data: configs, isLoading } = useQuery({
+  const { data: configs, isPending } = useQuery({
     queryKey: ["rankTrackingConfigs", projectId],
     queryFn: () => getRankTrackingConfigs({ data: { projectId } }),
   });
@@ -40,7 +40,13 @@ function RankTrackingConfigRoute() {
     });
   };
 
-  if (isLoading) return null;
+  if (isPending) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <span className="loading loading-spinner loading-lg" />
+      </div>
+    );
+  }
 
   if (!config) {
     return (