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) => (
+
+ ))}
+
+
+ );
+}