Keep skeleton up while moderation labels are still resolving

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.
This commit is contained in:
lemon
2026-05-28 13:35:39 -07:00
parent 3adaf9709f
commit 83554c726d
+11 -2
View File
@@ -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<string>();
@@ -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 = (
<DiscoverySearchToolbar
@@ -254,7 +263,7 @@ export function CommunitiesPage() {
</Card>
)}
</>
) : featuredOrgsLoading ? (
) : idleLoading ? (
<CommunityGrid>
{Array.from({ length: 8 }).map((_, i) => (
<CommunityMiniCardSkeleton key={i} className="w-full" />