bitnimble · androettop · Jul 15, 2025 · Jul 15, 2025 · Jul 16, 2025 · Jan 4, 2026
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -7,6 +7,7 @@ import { NavBar } from 'ui/nav_bar/nav_bar';
 import './globals.css';
 import styles from './layout.module.css';
 import { MaintenanceBanner } from 'app/maintenance_banner';
+import { SkeletonProvider } from 'app/skeleton_provider';
 
 export const metadata: Metadata = {
   title: 'ParaDB',
@@ -26,13 +27,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body>
         <ApiProvider>
           <SessionProvider>
-            <div className={styles.skeleton}>
+            <SkeletonProvider className={styles.skeleton}>
               {flags.get('showMaintenanceBanner') ? (
                 <MaintenanceBanner message={flags.get('maintenanceBannerMessage')} />
               ) : null}
               <NavBar />
               <div className={styles.content}>{children}</div>
-            </div>
+            </SkeletonProvider>
           </SessionProvider>
         </ApiProvider>
       </body>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import { action, computed, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { useSearchParams } from 'next/navigation';
-import React, { Suspense, useState } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 import { Difficulty, PDMap } from 'schema/maps';
 import { Button } from 'ui/base/button/button';
 import { metrics } from 'ui/base/design_system/design_tokens';
@@ -18,6 +18,8 @@ import { KnownDifficulty, difficultyColors, parseDifficulty } from 'utils/diffic
 import { RoutePath, routeFor } from 'utils/routes';
 import styles from './page.module.css';
 import { Search } from './search';
+import useInfiniteScroll from 'hooks/useInfiniteScroll';
+import { useSkeletonRef } from 'app/skeleton_provider';
 
 export default function Page() {
   return (
@@ -62,7 +64,15 @@ const Home = observer(() => {
   );
   const [presenter] = useState(() => new MapListPresenter(api, store));
 
-  React.useEffect(() => {
+  const skeletonRef = useSkeletonRef();
+
+  useInfiniteScroll(skeletonRef, () => {
+    if (store.hasMore && !store.loadingMore) {
+      presenter.onLoadMore();
+    }
+  });
+
+  useEffect(() => {
     if (store.maps == null) {
       presenter.onSearch('search');
     }
@@ -122,7 +132,7 @@ const MapListTable = observer((props: { store: MapListStore; presenter: MapListP
   const scrollableTable = observable.box(false);
   const tableScrollContainerRef = React.createRef<HTMLDivElement>();
   // TODO: avoid mixing mobx and hooks
-  React.useEffect(() => {
+  useEffect(() => {
     const dispose = reaction(
       () => store.maps,
       () => {

diff --git a/src/app/skeleton_provider.tsx b/src/app/skeleton_provider.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import React, { createContext, useContext, useRef, RefObject } from 'react';
+
+type SkeletonContextValue = RefObject<HTMLDivElement | null>;
+
+const SkeletonContext = createContext<SkeletonContextValue | null>(null);
+
+export function useSkeletonRef(): SkeletonContextValue {
+  const context = useContext(SkeletonContext);
+  if (!context) {
+    throw new Error('useSkeletonRef must be used within a SkeletonProvider');
+  }
+  return context;
+}
+
+export function SkeletonProvider({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className: string;
+}) {
+  const skeletonRef = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <SkeletonContext.Provider value={skeletonRef}>
+      <div id="skeleton" ref={skeletonRef} className={className}>
+        {children}
+      </div>
+    </SkeletonContext.Provider>
+  );
+}
diff --git a/src/hooks/useInfiniteScroll.ts b/src/hooks/useInfiniteScroll.ts
@@ -0,0 +1,74 @@
+import { RefObject, useEffect, useEffectEvent, useRef } from 'react';
+
+/**
+ * The space in pixels from the bottom of the container to trigger the callback.
+ */
+export const DEFAULT_THRESHOLD = 100;
+
+/**
+ * Default debounce delay in milliseconds.
+ */
+export const DEFAULT_DEBOUNCE_MS = 150;
+
+export type ScrollContainerRef = RefObject<HTMLElement | null> | (() => HTMLElement | null);
+
+export interface UseInfiniteScrollOptions {
+  /** The distance from the bottom of the container to trigger the callback. */
+  threshold?: number;
+  /** Debounce delay in milliseconds. */
+  debounceMs?: number;
+}
+
+/**
+ * Hook to handle infinite scrolling on a scrollable container.
+ * It calls the provided callback when the user scrolls near the bottom of the container.
+ * @param scrollContainerRef - A ref or getter function for the scrollable container element.
+ * @param callback - The function to call when the user scrolls near the bottom.
+ * @param options - Optional configuration (threshold).
+ */
+const useInfiniteScroll = (
+  scrollContainerRef: ScrollContainerRef,
+  callback: () => void,
+  options: UseInfiniteScrollOptions = {}
+) => {
+  const { threshold = DEFAULT_THRESHOLD, debounceMs = DEFAULT_DEBOUNCE_MS } = options;
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleScrollCallback = useEffectEvent(callback);
+
+  useEffect(() => {
+    const target =
+      typeof scrollContainerRef === 'function' ? scrollContainerRef() : scrollContainerRef.current;
+
+    if (!target) {
+      return;
+    }
+
+    const handleScroll = () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      timeoutRef.current = setTimeout(() => {
+        const scrollTop = target.scrollTop;
+        const scrollHeight = target.scrollHeight;
+        const clientHeight = target.clientHeight;
+
+        if (scrollHeight - scrollTop <= clientHeight + threshold) {
+          handleScrollCallback();
+        }
+      }, debounceMs);
+    };
+
+    target.addEventListener('scroll', handleScroll);
+
+    return () => {
+      target.removeEventListener('scroll', handleScroll);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [scrollContainerRef, threshold, debounceMs]);
+};
+
+export default useInfiniteScroll;