From 83554c726da27062ff3e8d4e602d6412ad1fba30 Mon Sep 17 00:00:00 2001 From: lemon Date: Thu, 28 May 2026 13:35:39 -0700 Subject: [PATCH] Keep skeleton up while moderation labels are still resolving MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit useFeaturedOrganizations is internally gated on moderationReady — while the organization moderation labels are loading, the underlying query is disabled and reports isLoading: false / data: undefined. The Groups page was using only that isLoading flag to decide whether to show the skeleton, so during the moderation-loading window it rendered the empty state for a moment before the curated grid popped in. Track moderation readiness alongside the featured query and treat any of the three states — moderation not ready, featured query in flight, featured data not yet defined — as loading. --- src/pages/CommunitiesPage.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/pages/CommunitiesPage.tsx b/src/pages/CommunitiesPage.tsx index 443bf5e6..0bfc8595 100644 --- a/src/pages/CommunitiesPage.tsx +++ b/src/pages/CommunitiesPage.tsx @@ -102,7 +102,7 @@ export function CommunitiesPage() { // Lift org moderation to the page so search results can drop hidden // groups (or include them when the Show-hidden switch is on). - const { data: orgModeration } = useOrganizationModeration(); + const { data: orgModeration, isReady: orgModerationReady } = useOrganizationModeration(); const { searchHits, searchHiddenCount } = useMemo(() => { if (!searchHitsRaw) return { searchHits: undefined, searchHiddenCount: 0 }; const hiddenCoords = orgModeration?.hiddenCoords ?? new Set(); @@ -161,6 +161,15 @@ export function CommunitiesPage() { .filter((c) => (isMod && showHidden) || !hiddenCoords.has(c.aTag)); }, [featuredOrgs, orgModeration, isMod, showHidden]); + // Idle-render skeleton gate. `useFeaturedOrganizations` is internally + // gated on `moderationReady`, so while the moderation labels are + // still loading, the hook is *disabled* and reports `isLoading: false` + // / `data: undefined`. Treating that as "not loading" would render + // the empty state for a moment before the curated grid pops in; + // tracking moderation-readiness here keeps the skeleton on screen + // until we know what's featured. + const idleLoading = !orgModerationReady || featuredOrgsLoading || featuredOrgs === undefined; + // Search + sort + show-hidden cluster for the unified section. const searchToolbar = ( )} - ) : featuredOrgsLoading ? ( + ) : idleLoading ? ( {Array.from({ length: 8 }).map((_, i) => (