diff --git a/src/webapp/app/(dashboard)/profile/[handle]/(withHeader)/network/contributed-to/loading.tsx b/src/webapp/app/(dashboard)/profile/[handle]/(withHeader)/network/contributed-to/loading.tsx new file mode 100644 index 00000000..3448a3a9 --- /dev/null +++ b/src/webapp/app/(dashboard)/profile/[handle]/(withHeader)/network/contributed-to/loading.tsx @@ -0,0 +1,5 @@ +import ContributedToCollectionsContainerSkeleton from '@/features/follows/containers/contributedToCollectionsContainer/Skeleton.ContributedToCollectionsContainer'; + +export default function Loading() { + return ; +} diff --git a/src/webapp/features/collections/components/collectionSelectorOpenCollections/CollectionSelectorOpenCollections.tsx b/src/webapp/features/collections/components/collectionSelectorOpenCollections/CollectionSelectorOpenCollections.tsx index 96007c6f..9b4f482a 100644 --- a/src/webapp/features/collections/components/collectionSelectorOpenCollections/CollectionSelectorOpenCollections.tsx +++ b/src/webapp/features/collections/components/collectionSelectorOpenCollections/CollectionSelectorOpenCollections.tsx @@ -34,7 +34,6 @@ export default function CollectionSelectorOpenCollections(props: Props) { // Get collections the current user has contributed to const userContributedCollections = useOpenCollectionsWithContributor({ identifier: user?.id || '', - enabled: !!user?.id && !search, // Only fetch when not searching }); // Use contributed collections by default, fall back to searched collections when searching diff --git a/src/webapp/features/collections/lib/queries/useOpenCollectionsWithContributor.tsx b/src/webapp/features/collections/lib/queries/useOpenCollectionsWithContributor.tsx index c2546dcc..e3ec7572 100644 --- a/src/webapp/features/collections/lib/queries/useOpenCollectionsWithContributor.tsx +++ b/src/webapp/features/collections/lib/queries/useOpenCollectionsWithContributor.tsx @@ -1,4 +1,4 @@ -import { useInfiniteQuery } from '@tanstack/react-query'; +import { useSuspenseInfiniteQuery } from '@tanstack/react-query'; import { getOpenCollectionsWithContributor } from '../dal'; import { collectionKeys } from '../collectionKeys'; import { CollectionSortField, GetCollectionsResponse } from '@semble/types'; @@ -7,13 +7,12 @@ interface Props { identifier: string; limit?: number; sortBy?: CollectionSortField; - enabled?: boolean; } export default function useOpenCollectionsWithContributor(props: Props) { const limit = props?.limit ?? 10; - return useInfiniteQuery({ + return useSuspenseInfiniteQuery({ queryKey: [ ...collectionKeys.all(), 'openWithContributor', @@ -34,6 +33,5 @@ export default function useOpenCollectionsWithContributor(props: Props) { ? lastPage.pagination.currentPage + 1 : undefined; }, - enabled: props.enabled !== false && !!props.identifier, }); } diff --git a/src/webapp/features/follows/containers/contributedToCollectionsContainer/ContributedToCollectionsContainer.tsx b/src/webapp/features/follows/containers/contributedToCollectionsContainer/ContributedToCollectionsContainer.tsx index 35c9f904..200d94f0 100644 --- a/src/webapp/features/follows/containers/contributedToCollectionsContainer/ContributedToCollectionsContainer.tsx +++ b/src/webapp/features/follows/containers/contributedToCollectionsContainer/ContributedToCollectionsContainer.tsx @@ -11,23 +11,13 @@ interface Props { } export default function ContributedToCollectionsContainer(props: Props) { - const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isPending } = + const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useOpenCollectionsWithContributor({ identifier: props.handle }); const { settings } = useUserSettings(); const allCollections = data?.pages.flatMap((page) => page.collections ?? []) ?? []; - if (isPending) { - return ( - -
- Loading... -
-
- ); - } - return ( @@ -41,7 +31,7 @@ export default function ContributedToCollectionsContainer(props: Props) { diff --git a/src/webapp/features/follows/containers/contributedToCollectionsContainer/Skeleton.ContributedToCollectionsContainer.tsx b/src/webapp/features/follows/containers/contributedToCollectionsContainer/Skeleton.ContributedToCollectionsContainer.tsx new file mode 100644 index 00000000..52bfe668 --- /dev/null +++ b/src/webapp/features/follows/containers/contributedToCollectionsContainer/Skeleton.ContributedToCollectionsContainer.tsx @@ -0,0 +1,14 @@ +import CollectionCardSkeleton from '@/features/collections/components/collectionCard/Skeleton.CollectionCard'; +import { Container, SimpleGrid } from '@mantine/core'; + +export default function ContributedToCollectionsContainerSkeleton() { + return ( + + + {Array.from({ length: 4 }).map((_, i) => ( + + ))} + + + ); +}