diff --git a/apps/web/src/hooks/useGraph.tsx b/apps/web/src/hooks/useGraph.tsx index 1262f803..5d50c453 100644 --- a/apps/web/src/hooks/useGraph.tsx +++ b/apps/web/src/hooks/useGraph.tsx @@ -32,6 +32,9 @@ export const useFollowsInfiniteQuery = ( queryFn: ({ pageParam }) => getFollows(actor, limit, dids, pageParam), getNextPageParam: (lastPage) => lastPage.cursor, initialPageParam: undefined as string | undefined, + // Don't fire with an empty actor — that would populate a "loaded" cache + // entry and suppress the skeleton when the real DID arrives next render. + enabled: !!actor, }); export const useFollowersQuery = ( @@ -55,6 +58,7 @@ export const useFollowersInfiniteQuery = ( queryFn: ({ pageParam }) => getFollowers(actor, limit, dids, pageParam), getNextPageParam: (lastPage) => lastPage.cursor, initialPageParam: undefined as string | undefined, + enabled: !!actor, }); export const useFollowAccountMutation = () => { diff --git a/apps/web/src/pages/profile/circles/Circles.tsx b/apps/web/src/pages/profile/circles/Circles.tsx index b1705988..c8823d64 100644 --- a/apps/web/src/pages/profile/circles/Circles.tsx +++ b/apps/web/src/pages/profile/circles/Circles.tsx @@ -53,7 +53,7 @@ function Circles() { const [isSignInOpen, setIsSignInOpen] = useState(false); const { did } = useParams({ strict: false }); const profile = useProfileByDidQuery(did!); - const { data, isLoading } = useActorNeighboursQuery(did!); + const { data, isPending, isFetching } = useActorNeighboursQuery(did!); const { mutate: followAccount } = useFollowAccountMutation(); const { mutate: unfollowAccount } = useUnfollowAccountMutation(); @@ -108,19 +108,20 @@ function Circles() {

People on Rocksky with similar music taste to @{profile.data?.handle}

- {isLoading && ( + {(isPending || + (isFetching && (data?.neighbours?.length ?? 0) === 0)) && (
)} - {!isLoading && data?.neighbours.length === 0 && ( + {!isPending && !isFetching && data?.neighbours.length === 0 && (
No circles found yet. Check back later!
)} - {!isLoading && (data?.neighbours || []).length > 0 && ( + {!isPending && (data?.neighbours || []).length > 0 && (
{data?.neighbours.map((neighbour: Neighbour) => (
0 ? `(${numeral(count).format("0,0")})` : ""} - {isLoading && } + {(isPending || (isFetching && allFollowers.length === 0)) && ( + + )} {allFollowers.length === 0 && data && (
diff --git a/apps/web/src/pages/profile/follows/Follows.tsx b/apps/web/src/pages/profile/follows/Follows.tsx index fda03af3..20da06a2 100644 --- a/apps/web/src/pages/profile/follows/Follows.tsx +++ b/apps/web/src/pages/profile/follows/Follows.tsx @@ -50,8 +50,14 @@ function Follows() { const [isSignInOpen, setIsSignInOpen] = useState(false); const { did } = useParams({ strict: false }); const profile = useProfileByDidQuery(did!); - const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } = - useFollowsInfiniteQuery(profile.data?.did!, 20); + const { + data, + isPending, + isFetching, + fetchNextPage, + hasNextPage, + isFetchingNextPage, + } = useFollowsInfiniteQuery(profile.data?.did!, 20); const { mutate: followAccount } = useFollowAccountMutation(); const { mutate: unfollowAccount } = useUnfollowAccountMutation(); @@ -127,7 +133,9 @@ function Follows() { Following {count > 0 ? `(${numeral(count).format("0,0")})` : ""} - {isLoading && } + {(isPending || (isFetching && allFollows.length === 0)) && ( + + )} {allFollows.length === 0 && data && (
diff --git a/apps/web/src/pages/profile/lovedtracks/LovedTracks.tsx b/apps/web/src/pages/profile/lovedtracks/LovedTracks.tsx index 5edad20b..833e5b78 100644 --- a/apps/web/src/pages/profile/lovedtracks/LovedTracks.tsx +++ b/apps/web/src/pages/profile/lovedtracks/LovedTracks.tsx @@ -113,9 +113,8 @@ function LovedTracks() { Loved Tracks ({numeral(profileStats.data?.lovedTracks).format("0,0")}) )} - {lovedTracksResult.isLoading && lovedTracks.length === 0 && ( - - )} + {(lovedTracksResult.isPending || lovedTracksResult.isFetching) && + lovedTracks.length === 0 && } ({ id: x.id, diff --git a/apps/web/src/pages/profile/playlists/Playlists.tsx b/apps/web/src/pages/profile/playlists/Playlists.tsx index f65b3916..1a2a3114 100644 --- a/apps/web/src/pages/profile/playlists/Playlists.tsx +++ b/apps/web/src/pages/profile/playlists/Playlists.tsx @@ -48,7 +48,7 @@ function Playlists() { const playlistsData = usePlaylistsQuery(did!); useEffect(() => { - if (playlistsData.isLoading || playlistsData.isError) { + if (playlistsData.isPending || playlistsData.isError) { return; } @@ -58,14 +58,14 @@ function Playlists() { setPlaylists(playlistsData.data); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [playlistsData.data, playlistsData.isLoading, playlistsData.isError, did]); + }, [playlistsData.data, playlistsData.isPending, playlistsData.isError, did]); return ( <> Playlists - {playlistsData.isLoading && playlists.length === 0 && ( + {playlistsData.isPending && playlists.length === 0 && ( )} - {!playlistsData.isLoading && playlists.length === 0 && ( + {!playlistsData.isPending && playlists.length === 0 && (
No playlists found
)} {playlists.length > 0 && (