Add infinite scrolling

package.json

@@ -16,6 +16,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.7.1",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-no-ssr": "^1.1.0",
     "sass": "^1.58.1",
     "usehooks-ts": "^2.9.1",

src/pages/index.tsx

@@ -7,21 +7,23 @@ import {useDebounce} from "usehooks-ts";
 import {AiOutlineLoading3Quarters} from "react-icons/ai";
 import IconCatalog from "@components/render/IconCatalog";
 import NoSSR from 'react-no-ssr';
+import InfiniteScroll from "react-infinite-scroll-component";
 
-const icons = iconList as { id: string, setId: string }[];
+export type IconIdentifierPair = { id: string, setId: string };
+const icons = iconList as IconIdentifierPair[];
 
 const Home: NextPage = () => {
     const [query, setQuery] = useState("");
     const [showLoading, setShowLoading] = useState(false);
     const [timing, setTiming] = useState<number>(0);
-    const debouncedQuery = useDebounce(query, 300);
+    const debouncedQuery = useDebounce(query, 800);
 
     useEffect(() => {
         setShowLoading(query.length != 0);
     }, [query]);
 
 
-    const filtered = useMemo(() => {
+    const allFilteredIcons = useMemo(() => {
         const start = new Date();
         const results = debouncedQuery.length == 0 ? [] : icons.filter(({id}) => id.toLowerCase().indexOf(query) !== -1);
         const end = new Date();
@@ -32,9 +34,12 @@ const Home: NextPage = () => {
         return results;
     }, [debouncedQuery]);
 
-    const catalog = useMemo(() => {
-        return <IconCatalog icons={filtered.map(i => i).slice(0, 100)}/>;
-    }, [filtered]);
+    useEffect(() => {
+        setLazyIcons(icons.slice(0, 100))
+    }, [allFilteredIcons]);
+
+
+    const [lazyIcons, setLazyIcons] = useState<IconIdentifierPair[]>([]);
 
     return (
         <>
@@ -56,7 +61,7 @@ const Home: NextPage = () => {
                             {showLoading ? <AiOutlineLoading3Quarters className="animate-spin h-5 w-5"/>
                                 : (query.length == 0
                                     ? icons.length
-                                    : filtered.length)}
+                                    : allFilteredIcons.length)}
                         </span>
                         {
                             timing !== 0
@@ -66,31 +71,16 @@ const Home: NextPage = () => {
                     </NoSSR>
                 </div>
                 <div>
-                    {catalog}
+                    {useMemo(() => <InfiniteScroll hasMore={lazyIcons.length < allFilteredIcons.length}
+                                                   loader={<span>Loading...</span>}
+                                                   dataLength={lazyIcons.length}
+                                                   next={() => {
+                                                       const newLength = Math.min(lazyIcons.length + 300, allFilteredIcons.length)
+                                                       setLazyIcons(allFilteredIcons.slice(0, newLength))
+                                                   }}>
+                        <IconCatalog icons={lazyIcons}/>
+                    </InfiniteScroll>, [lazyIcons])}
                 </div>
-                {/*<ul role="list" className="grid gap-4 p-0 link-card-grid"
-                    style={{gridTemplateColumns: "repeat(auto-fit, minmax(24ch, 1fr))"}}>
-                    <Card
-                        href="https://docs.astro.build/"
-                        title="Documentation"
-                        body="Learn how Astro works and explore the official API docs."
-                    />
-                    <Card
-                        href="https://astro.build/integrations/"
-                        title="Integrations"
-                        body="Supercharge your project with new frameworks and libraries."
-                    />
-                    <Card
-                        href="https://astro.build/themes/"
-                        title="Themes"
-                        body="Explore a galaxy of community-built starter themes."
-                    />
-                    <Card
-                        href="https://astro.build/chat/"
-                        title="Community"
-                        body="Come say hi to our amazing Discord community. ❤️"
-                    />
-                </ul>*/}
             </main>
         </>
     );

yarn.lock

@@ -2151,6 +2151,13 @@ react-icons@^4.7.1:
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.7.1.tgz#0f4b25a5694e6972677cb189d2a72eabea7a8345"
   integrity sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==
 
+react-infinite-scroll-component@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz#7e511e7aa0f728ac3e51f64a38a6079ac522407f"
+  integrity sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==
+  dependencies:
+    throttle-debounce "^2.1.0"
+
 react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -2457,6 +2464,11 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
+throttle-debounce@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz#fd31865e66502071e411817e241465b3e9c372e2"
+  integrity sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==
+
 tiny-glob@^0.2.9:
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/tiny-glob/-/tiny-glob-0.2.9.tgz#2212d441ac17928033b110f8b3640683129d31e2"