From b9906d7b0dbb20897b26ccd7f431942b4de42e51 Mon Sep 17 00:00:00 2001
From: pdelfan <pdelfan@gmail.com>
Date: Thu, 21 May 2026 16:22:30 -0700
Subject: [PATCH] refactor: don't block page when fetching profile tab counts

---
 .../components/profileTabs/ProfileTabs.tsx    |  6 +--
 .../profile/lib/queries/useProfile.tsx        | 38 +++++++++++++++----
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/webapp/features/profile/components/profileTabs/ProfileTabs.tsx b/src/webapp/features/profile/components/profileTabs/ProfileTabs.tsx
index 5ba5f42c..996af072 100644
--- a/src/webapp/features/profile/components/profileTabs/ProfileTabs.tsx
+++ b/src/webapp/features/profile/components/profileTabs/ProfileTabs.tsx
@@ -32,21 +32,21 @@ export default function ProfileTabs(props: Props) {
             <TabItem
               value="cards"
               href={`${basePath}/cards`}
-              count={profile.urlCardCount}
+              count={profile?.urlCardCount}
             >
               Cards
             </TabItem>
             <TabItem
               value="collections"
               href={`${basePath}/collections`}
-              count={profile.collectionCount}
+              count={profile?.collectionCount}
             >
               Collections
             </TabItem>
             <TabItem
               value="connections"
               href={`${basePath}/connections`}
-              count={profile.connectionCount}
+              count={profile?.connectionCount}
             >
               Connections
             </TabItem>
diff --git a/src/webapp/features/profile/lib/queries/useProfile.tsx b/src/webapp/features/profile/lib/queries/useProfile.tsx
index 326d6dfc..823d471e 100644
--- a/src/webapp/features/profile/lib/queries/useProfile.tsx
+++ b/src/webapp/features/profile/lib/queries/useProfile.tsx
@@ -1,17 +1,41 @@
-import { useSuspenseQuery } from '@tanstack/react-query';
+import {
+  useSuspenseQuery,
+  useQuery,
+  UseQueryResult,
+  UseSuspenseQueryResult,
+} from '@tanstack/react-query';
 import { getProfile } from '../dal';
 import { profileKeys } from '../profileKeys';
 
-interface Props {
+type ProfileData = Awaited<ReturnType<typeof getProfile>>;
+
+interface PropsWithStats {
+  didOrHandle: string;
+  includeStats: true;
+}
+
+interface PropsWithoutStats {
   didOrHandle: string;
-  includeStats?: boolean;
+  includeStats?: false;
 }
 
-export default function useProfile(props: Props) {
-  const profile = useSuspenseQuery({
+export default function useProfile(
+  props: PropsWithStats,
+): UseQueryResult<ProfileData>;
+export default function useProfile(
+  props: PropsWithoutStats,
+): UseSuspenseQueryResult<ProfileData>;
+export default function useProfile(props: PropsWithStats | PropsWithoutStats) {
+  if (props.includeStats) {
+    // Non-suspense: stats are progressive — tabs render immediately, counts fill in async
+    return useQuery({
+      queryKey: profileKeys.profile(props.didOrHandle, true),
+      queryFn: () => getProfile(props.didOrHandle, true),
+    });
+  }
+
+  return useSuspenseQuery({
     queryKey: profileKeys.profile(props.didOrHandle, props.includeStats),
     queryFn: () => getProfile(props.didOrHandle, props.includeStats),
   });
-
-  return profile;
 }
-- 
2.51.2