From a7614db743c3eff052b48a1401f427b38dbd03d2 Mon Sep 17 00:00:00 2001 From: plebeius Date: Sat, 3 Jan 2026 16:14:08 +0100 Subject: [PATCH] fix(hooks): fix usePopularPosts loading state and change detection --- src/hooks/use-popular-posts.ts | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/hooks/use-popular-posts.ts b/src/hooks/use-popular-posts.ts index b41812c7..e91aea83 100644 --- a/src/hooks/use-popular-posts.ts +++ b/src/hooks/use-popular-posts.ts @@ -1,5 +1,5 @@ import { useMemo, useRef } from 'react'; -import { Subplebbit } from '@plebbit/plebbit-react-hooks'; +import { Comment, Subplebbit } from '@plebbit/plebbit-react-hooks'; import { getCommentMediaInfo, getHasThumbnail } from '../lib/utils/media-utils'; /** @@ -51,17 +51,20 @@ const usePopularPosts = (subplebbits: Subplebbit[]) => { } }, [subplebbits]); - // Create stable reference: only update if the CIDs actually change - // This prevents unnecessary rerenders when only updatingState changes - const currentCids = popularPosts.map((p: any) => p.cid).join(','); + // Create stable reference: only update if the post content actually changes + // Build a key from relevant mutable fields, not just CIDs + const currentKey = popularPosts.map((p) => `${p.cid}:${p.replyCount}:${p.timestamp}:${p.locked}:${p.pinned}`).join(','); const stablePostsRef = useRef(popularPosts); - if (currentCids !== prevCidsRef.current) { - prevCidsRef.current = currentCids; + if (currentKey !== prevCidsRef.current) { + prevCidsRef.current = currentKey; stablePostsRef.current = popularPosts; } - const isLoading = stablePostsRef.current.length === 0; + // Derive loading state from subplebbit states rather than post count + // A subplebbit is still loading if it has no posts pages yet and isn't in a terminal state + const hasLoadedData = subplebbits.some((sub) => sub?.posts?.pages?.hot?.comments); + const isLoading = subplebbits.length > 0 && !hasLoadedData; return { popularPosts: stablePostsRef.current, isLoading, error }; };