Add infinite scroll functionality with loading indicator to Scroll co…

…mponent

src/components/Scroll/Scroll.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, Preview, StoryObj } from '@storybook/react';
 import { Scroll } from './index';
 import { Item, Items } from './types';
+import { useState } from 'react';
 
 const preview: Preview = {
   title: 'Components/Scroll',
@@ -115,17 +116,6 @@ const item: Item['render'] = () => {
   );
 };
 
-const createItems = (headerCount: number, itemCount: number, level: number = 1): Items => {
-  if (headerCount === 0 || level === 0) {
-    return Array.from({ length: itemCount }, () => ({ render: item }));
-  }
-
-  return Array.from({ length: headerCount }, () => ({
-    render: HeaderCollapse(level),
-    nestedItems: createItems(headerCount, itemCount, level - 1),
-  }));
-};
-
 export const BasicExample: Story = {
   render: (args) => {
     const createItems = (headerCount: number, itemCount: number, level: number = 1): Items => {
@@ -248,3 +238,42 @@ export const ScrollToIdExample: Story = {
     headerBehavior: 'none',
   },
 };
+
+export const infiniteScrollExample: Story = {
+  render: (args) => {
+    const [updatesLeft, setUpdatesLeft] = useState(5);
+    const createItems = (headerCount: number, itemCount: number, level: number = 1): Items => {
+      if (headerCount === 0 || level === 0) {
+        return Array.from({ length: itemCount }, () => ({ render: item }));
+      }
+
+      return Array.from({ length: headerCount }, () => ({
+        render: Header(level),
+        nestedItems: createItems(headerCount, itemCount, level - 1),
+      }));
+    };
+    const [myitems, setMyItems] = useState<Items>([...createItems(1, 20)]);
+
+    const handleBottomReached = async () => {
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      setUpdatesLeft((prev) => prev - 1);
+      setMyItems((prev) => [...prev, ...createItems(1, 20)]);
+    };
+
+    const loading = {
+      onBottomReached: updatesLeft > 0 ? handleBottomReached : undefined,
+      // render: (isLoading: boolean) => <div>{isLoading ? 'Please wait!' : 'End of the list'}</div>,
+    };
+
+    return (
+      <div style={{ width: '400px', height: '400px' }}>
+        <Scroll {...args} items={myitems} loading={loading} />
+      </div>
+    );
+  },
+  args: {
+    stickTo: 'all',
+    scrollBehavior: 'smooth',
+    headerBehavior: 'none',
+  },
+};

src/components/Scroll/Scroll.tsx

@@ -1,19 +1,20 @@
 import React from 'react';
 import { HeadersProvider } from './Scroll.provider';
 import { ScrollList } from './ScrollList';
-import type { HeaderBehavior, Items, StickTo } from './types';
+import type { HeaderBehavior, Items, Loading, StickTo } from './types';
 
 interface IScrollProps {
   stickTo?: StickTo;
   scrollBehavior?: ScrollBehavior;
   headerBehavior?: HeaderBehavior;
   items: Items;
+  loading?: Loading;
 }
 
-export const Scroll: React.FC<IScrollProps> = ({ stickTo, scrollBehavior, headerBehavior, items }) => {
+export const Scroll: React.FC<IScrollProps> = ({ stickTo, scrollBehavior, headerBehavior, loading, items }) => {
   return (
     <HeadersProvider headerBehavior={headerBehavior} stickTo={stickTo} scrollBehavior={scrollBehavior}>
-      <ScrollList items={items} />
+      <ScrollList loading={loading} items={items} />
     </HeadersProvider>
   );
 };

src/components/Scroll/ScrollList.tsx

@@ -1,15 +1,17 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { useScrollContext } from './Scroll.provider';
-import { Items } from './types';
+import { Items, Loading } from './types';
 import { getItems } from './util/get-items';
+import { ScrollLoading } from './ScrollLoading';
 
 interface IScrollListProps {
   items: Items;
+  loading?: Loading;
 }
 
-export const ScrollList: React.FC<IScrollListProps> = ({ items }) => {
+export const ScrollList: React.FC<IScrollListProps> = ({ items, loading }) => {
   const { setListRef, headerBehavior, collapsedPaths } = useScrollContext();
-
+  const [isLoading, setisLoading] = React.useState(false);
   const listRef = useRef(null);
 
   useEffect(() => {
@@ -18,9 +20,29 @@ export const ScrollList: React.FC<IScrollListProps> = ({ items }) => {
     }
   }, [listRef]);
 
+  const handleScroll = useCallback(
+    (e: React.UIEvent<HTMLUListElement>) => {
+      if (items.length === 0 || !loading?.onBottomReached) return;
+
+      const target = e.target as HTMLUListElement;
+      if (Math.floor(target.scrollHeight - target.scrollTop) < target.clientHeight + 10) {
+        if (!target.dataset.loading) {
+          target.dataset.loading = 'true';
+          setisLoading(true);
+          loading.onBottomReached().finally(() => {
+            target.dataset.loading = '';
+            setisLoading(false);
+          });
+        }
+      }
+    },
+    [items.length === 0, loading?.onBottomReached],
+  );
+
   return (
-    <ul ref={listRef} className={`scroll-list`}>
+    <ul ref={listRef} className={`scroll-list`} onScroll={loading?.onBottomReached ? handleScroll : undefined}>
       {getItems({ items, headerBehavior, collapsedPaths })}
+      {loading?.render ? loading.render(isLoading) : <ScrollLoading loading={isLoading} />}
     </ul>
   );
 };

src/components/Scroll/ScrollLoading.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+interface IScrollLoadingProps {
+  loading: boolean;
+}
+
+export const ScrollLoading: React.FC<IScrollLoadingProps> = ({ loading }) => {
+  if (!loading) return null;
+
+  return <li role="listitem" aria-label="Scroll Loading" className={`scroll-loading ${loading ? 'loading' : ''}`}></li>;
+};

src/components/Scroll/types.ts

@@ -8,6 +8,11 @@ export type Collapse = {
   isOpen: boolean;
 };
 
+export type Loading = {
+  onBottomReached?: () => Promise<void>;
+  render?: (isLoading: boolean) => JSX.Element;
+};
+
 type RenderProps = { collapse?: Collapse };
 
 export type Item = {

src/index.css

@@ -42,3 +42,35 @@
   border: none;
   list-style: none;
 }
+
+.scroll-loading {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+  padding: 0;
+  margin: 0;
+  border: none;
+  list-style: none;
+  height: 4px;
+  background-color: #e0e0e0;
+  overflow: hidden;
+}
+
+.scroll-loading::before {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-color: #3b82f6;
+  animation: loading 1s linear infinite;
+}
+
+@keyframes loading {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}