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) {
Cards
Collections
Connections
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>;
+
+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;
+export default function useProfile(
+ props: PropsWithoutStats,
+): UseSuspenseQueryResult;
+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;
}