From 5c91613e00e918f1cfbc9a4449fc9ae02c0f33a3 Mon Sep 17 00:00:00 2001
From: shin-core <153108882+shin-core@users.noreply.github.com>
Date: Sun, 12 Jul 2026 01:39:31 +1000
Subject: [PATCH] fix(ui): surface shared ErrorState for GapsPanel fetch
 failures (#3961)

---
 apps/ui/src/routes/subnets.$netuid.tsx | 107 ++++++++++++-------------
 1 file changed, 50 insertions(+), 57 deletions(-)

diff --git a/apps/ui/src/routes/subnets.$netuid.tsx b/apps/ui/src/routes/subnets.$netuid.tsx
index 5140e49b8..035d2f372 100644
--- a/apps/ui/src/routes/subnets.$netuid.tsx
+++ b/apps/ui/src/routes/subnets.$netuid.tsx
@@ -1300,74 +1300,67 @@ function CandidatesPanel({ netuid }: { netuid: number }) {
 }
 
 function GapsPanel({ netuid, compact }: { netuid: number; compact?: boolean }) {
-  const { data: gapsResult, isLoading, error } = useQuery(subnetGapsQuery(netuid));
+  // Match the seven sibling tabs on this page: a genuine fetch error surfaces the
+  // shared red-bordered ErrorState (with retry) via QueryErrorBoundary, rather
+  // than reusing the success-case EmptyState look. Loading is the Suspense fallback.
+  return (
+    <SectionAnchor
+      id="gaps"
+      title={compact ? "Known gaps" : "Gaps"}
+      subtitle="Missing resources, profile incompleteness, and curation notes."
+      info="GET /api/v1/subnets/{netuid}/gaps"
+    >
+      <QueryErrorBoundary>
+        <Suspense fallback={<Skeleton className="h-24 w-full" />}>
+          <GapsList netuid={netuid} />
+        </Suspense>
+      </QueryErrorBoundary>
+    </SectionAnchor>
+  );
+}
+
+function GapsList({ netuid }: { netuid: number }) {
+  const { data: gapsResult } = useSuspenseQuery(subnetGapsQuery(netuid));
   const gaps = gapsResult?.data;
   const missing = gaps?.missing_kinds ?? [];
   const notes = gaps?.gap_notes ?? [];
-  if (isLoading) {
-    return (
-      <SectionAnchor id="gaps" title={compact ? "Known gaps" : "Gaps"}>
-        <Skeleton className="h-24 w-full" />
-      </SectionAnchor>
-    );
-  }
-  if (error) {
-    return (
-      <SectionAnchor id="gaps" title={compact ? "Known gaps" : "Gaps"}>
-        <EmptyState
-          title="Gaps unavailable"
-          description="The subnet gaps endpoint did not respond."
-          action={RECOVERY.gaps}
-        />
-      </SectionAnchor>
-    );
-  }
   if (missing.length === 0 && notes.length === 0) {
     return (
-      <SectionAnchor id="gaps" title="Gaps">
-        <EmptyState
-          title="No outstanding gaps"
-          description="Profile looks complete."
-          action={RECOVERY.gaps}
-        />
-      </SectionAnchor>
+      <EmptyState
+        title="No outstanding gaps"
+        description="Profile looks complete."
+        action={RECOVERY.gaps}
+      />
     );
   }
   return (
-    <SectionAnchor
-      id="gaps"
-      title={compact ? "Known gaps" : "Gaps"}
-      subtitle="Missing resources, profile incompleteness, and curation notes."
-      info="GET /api/v1/subnets/{netuid}/gaps"
-    >
-      <div className="rounded-lg border border-border bg-card p-4 space-y-3">
-        {missing.length > 0 ? (
-          <div>
-            <div className="mg-label mb-1">Missing kinds</div>
-            <div className="flex flex-wrap gap-1">
-              {missing.map((k) => (
-                <span
-                  key={k}
-                  className="rounded border border-dashed border-ink-subtle bg-paper px-1.5 py-0.5 font-mono text-[10px] text-ink-muted"
-                >
-                  {k}
-                </span>
-              ))}
-            </div>
-          </div>
-        ) : null}
-        {notes.length > 0 ? (
-          <ul className="space-y-1 text-[12px] text-ink leading-relaxed">
-            {notes.map((n, i) => (
-              <li key={i}>· {n}</li>
+    <div className="rounded-lg border border-border bg-card p-4 space-y-3">
+      {missing.length > 0 ? (
+        <div>
+          <div className="mg-label mb-1">Missing kinds</div>
+          <div className="flex flex-wrap gap-1">
+            {missing.map((k) => (
+              <span
+                key={k}
+                className="rounded border border-dashed border-ink-subtle bg-paper px-1.5 py-0.5 font-mono text-[10px] text-ink-muted"
+              >
+                {k}
+              </span>
             ))}
-          </ul>
-        ) : null}
-        <div className="border-t border-border pt-2 text-[11px] text-ink-muted">
-          Help close these gaps by opening a PR against the public registry repo.
+          </div>
         </div>
+      ) : null}
+      {notes.length > 0 ? (
+        <ul className="space-y-1 text-[12px] text-ink leading-relaxed">
+          {notes.map((n, i) => (
+            <li key={i}>· {n}</li>
+          ))}
+        </ul>
+      ) : null}
+      <div className="border-t border-border pt-2 text-[11px] text-ink-muted">
+        Help close these gaps by opening a PR against the public registry repo.
       </div>
-    </SectionAnchor>
+    </div>
   );
 }