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 && (