nandi.uk
This repository has no description
refactor: don't block page when fetching profile tab counts
author
pdelfan
date
(May 21, 2026, 4:22 PM -0700)
commit
b9906d7b
b9906d7b0dbb20897b26ccd7f431942b4de42e51
parent
524b444b
524b444b614c9357670c8db5896bc21db36edba5
+34
-10
+3
-3
src/webapp/features/profile/components/profileTabs/ProfileTabs.tsx
+3
-3
src/webapp/features/profile/components/profileTabs/ProfileTabs.tsx
···
32
32
<TabItem
33
33
value="cards"
34
34
href={`${basePath}/cards`}
35
-
count={profile.urlCardCount}
35
+
count={profile?.urlCardCount}
36
36
>
37
37
Cards
38
38
</TabItem>
39
39
<TabItem
40
40
value="collections"
41
41
href={`${basePath}/collections`}
42
-
count={profile.collectionCount}
42
+
count={profile?.collectionCount}
43
43
>
44
44
Collections
45
45
</TabItem>
46
46
<TabItem
47
47
value="connections"
48
48
href={`${basePath}/connections`}
49
-
count={profile.connectionCount}
49
+
count={profile?.connectionCount}
50
50
>
51
51
Connections
52
52
</TabItem>
+31
-7
src/webapp/features/profile/lib/queries/useProfile.tsx
+31
-7
src/webapp/features/profile/lib/queries/useProfile.tsx
···
1
-
import { useSuspenseQuery } from '@tanstack/react-query';
1
+
import {
2
+
useSuspenseQuery,
3
+
useQuery,
4
+
UseQueryResult,
5
+
UseSuspenseQueryResult,
6
+
} from '@tanstack/react-query';
2
7
import { getProfile } from '../dal';
3
8
import { profileKeys } from '../profileKeys';
4
9
5
-
interface Props {
10
+
type ProfileData = Awaited<ReturnType<typeof getProfile>>;
11
+
12
+
interface PropsWithStats {
6
13
didOrHandle: string;
7
-
includeStats?: boolean;
14
+
includeStats: true;
8
15
}
9
16
10
-
export default function useProfile(props: Props) {
11
-
const profile = useSuspenseQuery({
17
+
interface PropsWithoutStats {
18
+
didOrHandle: string;
19
+
includeStats?: false;
20
+
}
21
+
22
+
export default function useProfile(
23
+
props: PropsWithStats,
24
+
): UseQueryResult<ProfileData>;
25
+
export default function useProfile(
26
+
props: PropsWithoutStats,
27
+
): UseSuspenseQueryResult<ProfileData>;
28
+
export default function useProfile(props: PropsWithStats | PropsWithoutStats) {
29
+
if (props.includeStats) {
30
+
// Non-suspense: stats are progressive — tabs render immediately, counts fill in async
31
+
return useQuery({
32
+
queryKey: profileKeys.profile(props.didOrHandle, true),
33
+
queryFn: () => getProfile(props.didOrHandle, true),
34
+
});
35
+
}
36
+
37
+
return useSuspenseQuery({
12
38
queryKey: profileKeys.profile(props.didOrHandle, props.includeStats),
13
39
queryFn: () => getProfile(props.didOrHandle, props.includeStats),
14
40
});
15
-
16
-
return profile;
17
41
}