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:
@@ -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" />
|
||||
|
||||
Reference in New Issue
Block a user