+5

src/webapp/app/(dashboard)/profile/[handle]/(withHeader)/network/contributed-to/loading.tsx

View file Reviewed

··· 1 1 + import ContributedToCollectionsContainerSkeleton from '@/features/follows/containers/contributedToCollectionsContainer/Skeleton.ContributedToCollectionsContainer'; 2 2 + 3 3 + export default function Loading() { 4 4 + return <ContributedToCollectionsContainerSkeleton />; 5 5 + }

-1

src/webapp/features/collections/components/collectionSelectorOpenCollections/CollectionSelectorOpenCollections.tsx

View file Reviewed

··· 34 34 // Get collections the current user has contributed to 35 35 const userContributedCollections = useOpenCollectionsWithContributor({ 36 36 identifier: user?.id || '', 37 37 - enabled: !!user?.id && !search, // Only fetch when not searching 38 37 }); 39 38 40 39 // Use contributed collections by default, fall back to searched collections when searching

+2 -4

src/webapp/features/collections/lib/queries/useOpenCollectionsWithContributor.tsx

View file Reviewed

··· 1 1 - import { useInfiniteQuery } from '@tanstack/react-query'; 1 1 + import { useSuspenseInfiniteQuery } from '@tanstack/react-query'; 2 2 import { getOpenCollectionsWithContributor } from '../dal'; 3 3 import { collectionKeys } from '../collectionKeys'; 4 4 import { CollectionSortField, GetCollectionsResponse } from '@semble/types'; ··· 7 7 identifier: string; 8 8 limit?: number; 9 9 sortBy?: CollectionSortField; 10 10 - enabled?: boolean; 11 10 } 12 11 13 12 export default function useOpenCollectionsWithContributor(props: Props) { 14 13 const limit = props?.limit ?? 10; 15 14 16 16 - return useInfiniteQuery<GetCollectionsResponse>({ 15 15 + return useSuspenseInfiniteQuery<GetCollectionsResponse>({ 17 16 queryKey: [ 18 17 ...collectionKeys.all(), 19 18 'openWithContributor', ··· 34 33 ? lastPage.pagination.currentPage + 1 35 34 : undefined; 36 35 }, 37 37 - enabled: props.enabled !== false && !!props.identifier, 38 36 }); 39 37 }

+2 -12

src/webapp/features/follows/containers/contributedToCollectionsContainer/ContributedToCollectionsContainer.tsx

View file Reviewed

··· 11 11 } 12 12 13 13 export default function ContributedToCollectionsContainer(props: Props) { 14 14 - const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isPending } = 14 14 + const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = 15 15 useOpenCollectionsWithContributor({ identifier: props.handle }); 16 16 17 17 const { settings } = useUserSettings(); 18 18 const allCollections = 19 19 data?.pages.flatMap((page) => page.collections ?? []) ?? []; 20 20 21 21 - if (isPending) { 22 22 - return ( 23 23 - <Container p="xs" size="xl"> 24 24 - <Center> 25 25 - <Text c="gray">Loading...</Text> 26 26 - </Center> 27 27 - </Container> 28 28 - ); 29 29 - } 30 30 - 31 21 return ( 32 22 <Container p="xs" size="xl"> 33 23 <Stack> ··· 41 31 <InfiniteScroll 42 32 dataLength={allCollections.length} 43 33 hasMore={!!hasNextPage} 44 44 - isInitialLoading={isPending} 34 34 + isInitialLoading={false} 45 35 isLoading={isFetchingNextPage} 46 36 loadMore={fetchNextPage} 47 37 >

+14

src/webapp/features/follows/containers/contributedToCollectionsContainer/Skeleton.ContributedToCollectionsContainer.tsx

View file Reviewed

··· 1 1 + import CollectionCardSkeleton from '@/features/collections/components/collectionCard/Skeleton.CollectionCard'; 2 2 + import { Container, SimpleGrid } from '@mantine/core'; 3 3 + 4 4 + export default function ContributedToCollectionsContainerSkeleton() { 5 5 + return ( 6 6 + <Container p={'xs'} size={'xl'}> 7 7 + <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="xs"> 8 8 + {Array.from({ length: 4 }).map((_, i) => ( 9 9 + <CollectionCardSkeleton key={i} /> 10 10 + ))} 11 11 + </SimpleGrid> 12 12 + </Container> 13 13 + ); 14 14 + }