fix(ui): proper loading states for rank tracking list, detail, and dashboard cards (#419)

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"

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" />

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 (