Merge branch 'development' into feature/personal-url-cards

src/webapp/components/contentDisplay/infiniteScroll/InfiniteScroll.tsx

···
+'use client';
+
+import { ReactNode, useEffect, startTransition, useRef } from 'react';
+import { Center, Button, Stack } from '@mantine/core';
+import { useIntersection } from '@mantine/hooks';
+
+interface Props {
+  children: ReactNode;
+  dataLength: number;
+  hasMore: boolean;
+  isInitialLoading: boolean;
+  isLoading: boolean;
+  loadMore: () => void;
+  loader?: ReactNode;
+  manualLoadButton?: boolean;
+}
+
+export default function InfiniteScroll(props: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { ref, entry } = useIntersection({
+    root: containerRef.current,
+    threshold: 0,
+  });
+
+  useEffect(() => {
+    startTransition(() => {
+      if (entry?.isIntersecting && props.hasMore && !props.isLoading) {
+        props.loadMore();
+      }
+    });
+  }, [entry?.isIntersecting, props.hasMore, props.isLoading, props.loadMore]);
+
+  return (
+    <Stack>
+      {props.children}
+      {props.isLoading && props.loader}
+
+      <Center ref={ref}>
+        {!props.isLoading && props.hasMore && props.manualLoadButton && (
+          <Button loading={props.isLoading} onClick={props.loadMore}>
+            Load more
+          </Button>
+        )}
+      </Center>
+    </Stack>
+  );
+}

src/webapp/components/navigation/navbar/Navbar.tsx

···
   const { data: profile } = useMyProfile();
 
   return (
-    <AppShellNavbar px={'xs'} pb={'md'} pt={'xs'} style={{ zIndex: 3 }}>
+    <AppShellNavbar p={'xs'} style={{ zIndex: 3 }}>
       <Group justify="space-between" ml={'sm'}>
         <Anchor component={Link} href={'/home'}>
           <Image src={SembleLogo.src} alt="Semble logo" w={20.84} h={28} />

src/webapp/features/cards/components/addCardToModal/CardToBeAddedPreview.tsx

···
 import { LuLibrary } from 'react-icons/lu';
 import { getDomain } from '@/lib/utils/link';
 import useMyProfile from '@/features/profile/lib/queries/useMyProfile';
+import { getRecordKey } from '@/lib/utils/atproto';
 
 interface Props {
   cardId: string;
···
                   <Menu.Item
                     key={c.id}
                     component={Link}
-                    href={`/profile/${c.createdBy.handle}/collections/${c.id}`}
+                    href={`/profile/${c.createdBy.handle}/collections/${getRecordKey(c.uri!)}`}
                     target="_blank"
                     c="blue"
                     fw={600}

src/webapp/features/cards/components/urlCard/UrlCard.tsx

···
   Group,
   Anchor,
   AspectRatio,
+  Skeleton,
 } from '@mantine/core';
 import Link from 'next/link';
 import UrlCardActions from '../urlCardActions/UrlCardActions';
···
             )}
           </Group>
 
-          <Suspense>
+          <Suspense
+            fallback={
+              <Group justify="space-between">
+                <Group gap={'xs'}>
+                  <Skeleton w={22} h={22} />
+                </Group>
+                <Skeleton w={22} h={22} />
+              </Group>
+            }
+          >
             <UrlCardActions
               cardContent={props.cardContent}
               id={props.id}

src/webapp/features/cards/containers/cardsContainer/CardsContainer.tsx

···
 'use client';
 
-import { Container, Grid, Stack, Button, Text, Center } from '@mantine/core';
+import { Center, Container, Grid, Loader, Stack } from '@mantine/core';
 import useCards from '../../lib/queries/useCards';
 import UrlCard from '@/features/cards/components/urlCard/UrlCard';
 import CardsContainerError from './Error.CardsContainer';
 import CardsContainerSkeleton from './Skeleton.CardsContainer';
-import { Fragment, useState } from 'react';
 import ProfileEmptyTab from '@/features/profile/components/profileEmptyTab/ProfileEmptyTab';
 import { FaRegNoteSticky } from 'react-icons/fa6';
+import InfiniteScroll from '@/components/contentDisplay/infiniteScroll/InfiniteScroll';
 
 interface Props {
   handle: string;
···
 
   return (
     <Container p="xs" size="xl">
-      <Stack>
-        <Fragment>
-          <Grid gutter="md">
-            {allCards.map((card) => (
-              <Grid.Col key={card.id} span={{ base: 12, xs: 6, sm: 4, lg: 3 }}>
-                <UrlCard
-                  id={card.id}
-                  url={card.url}
-                  cardContent={card.cardContent}
-                  note={card.note}
-                  collections={card.collections}
-                  authorHandle={props.handle}
-                />
-              </Grid.Col>
-            ))}
-          </Grid>
-
-          {hasNextPage && (
-            <Center>
-              <Button
-                onClick={() => fetchNextPage()}
-                disabled={isFetchingNextPage}
-                loading={isFetchingNextPage}
-                variant="light"
-                color="gray"
-                mt="md"
-              >
-                Load More
-              </Button>
-            </Center>
-          )}
-        </Fragment>
-      </Stack>
+      <InfiniteScroll
+        dataLength={allCards.length}
+        hasMore={!!hasNextPage}
+        isInitialLoading={isPending}
+        isLoading={isFetchingNextPage}
+        loadMore={fetchNextPage}
+        manualLoadButton={false}
+        loader={
+          <Center>
+            <Loader />
+          </Center>
+        }
+      >
+        <Grid gutter="md">
+          {allCards.map((card) => (
+            <Grid.Col key={card.id} span={{ base: 12, xs: 6, sm: 4, lg: 3 }}>
+              <UrlCard
+                id={card.id}
+                url={card.url}
+                cardContent={card.cardContent}
+                note={card.note}
+                collections={card.collections}
+                authorHandle={props.handle}
+              />
+            </Grid.Col>
+          ))}
+        </Grid>
+      </InfiniteScroll>
     </Container>
   );
 }

src/webapp/features/collections/containers/collectionsContainer/CollectionsContainer.tsx

···
 'use client';
 
-import { Button, Container, Stack, SimpleGrid, Center } from '@mantine/core';
+import { Button, Container, Stack, SimpleGrid } from '@mantine/core';
 import useCollections from '../../lib/queries/useCollections';
 import CollectionCard from '../../components/collectionCard/CollectionCard';
 import CreateCollectionDrawer from '../../components/createCollectionDrawer/CreateCollectionDrawer';
 import { useState } from 'react';
 import ProfileEmptyTab from '@/features/profile/components/profileEmptyTab/ProfileEmptyTab';
 import { BiCollection } from 'react-icons/bi';
+import InfiniteLoadTrigger from '@/components/contentDisplay/infiniteScroll/InfiniteScroll';
 
 interface Props {
   handle: string;
···
   return (
     <Container p="xs" size="xl">
       <Stack>
-        <Stack>
+        <InfiniteLoadTrigger
+          dataLength={collections.length}
+          hasMore={!!hasNextPage}
+          isInitialLoading={false} // or you can manage initial loading state if needed
+          isLoading={isFetchingNextPage}
+          loadMore={fetchNextPage}
+          manualLoadButton={false} // automatic infinite scroll; set true if you want manual button
+          loader={<div>Loading...</div>} // replace with your loader component if you want
+        >
           <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="md">
             {collections.map((collection) => (
               <CollectionCard key={collection.id} collection={collection} />
             ))}
           </SimpleGrid>
-
-          {hasNextPage && (
-            <Center>
-              <Button
-                onClick={() => fetchNextPage()}
-                disabled={isFetchingNextPage}
-                loading={isFetchingNextPage}
-                variant="light"
-                color="gray"
-                mt="md"
-              >
-                Load More
-              </Button>
-            </Center>
-          )}
-        </Stack>
+        </InfiniteLoadTrigger>
       </Stack>
 
       <CreateCollectionDrawer

src/webapp/features/feeds/containers/myFeedContainer/MyFeedContainer.tsx

···
 
 import useMyFeed from '@/features/feeds/lib/queries/useMyFeed';
 import FeedItem from '@/features/feeds/components/feedItem/FeedItem';
-import { Button, Stack, Title, Text, Center, Container } from '@mantine/core';
+import { Stack, Title, Text, Center, Container, Loader } from '@mantine/core';
 import MyFeedContainerSkeleton from './Skeleton.MyFeedContainer';
 import MyFeedContainerError from './Error.MyFeedContainer';
+import InfiniteScroll from '@/components/contentDisplay/infiniteScroll/InfiniteScroll';
 
 export default function MyFeedContainer() {
   const {
···
             </Text>
           </Center>
         ) : (
-          <Stack gap={'xl'} mx={'auto'} maw={600}>
-            <Stack gap={60}>
-              {allActivities.map((item, i) => (
-                <FeedItem key={item.id} item={item} />
-              ))}
-            </Stack>
-
-            {hasNextPage && (
+          <InfiniteScroll
+            dataLength={allActivities.length}
+            hasMore={!!hasNextPage}
+            isInitialLoading={isPending}
+            isLoading={isFetchingNextPage}
+            loadMore={fetchNextPage}
+            manualLoadButton={false}
+            loader={
               <Center>
-                <Button
-                  onClick={() => fetchNextPage()}
-                  loading={isFetchingNextPage}
-                  variant="light"
-                  color="gray"
-                >
-                  Load More
-                </Button>
+                <Loader />
               </Center>
-            )}
-          </Stack>
+            }
+          >
+            <Stack gap={'xl'} mx={'auto'} maw={600}>
+              <Stack gap={60}>
+                {allActivities.map((item) => (
+                  <FeedItem key={item.id} item={item} />
+                ))}
+              </Stack>
+            </Stack>
+          </InfiniteScroll>
         )}
       </Stack>
     </Container>