Enhance ModelDisplay component with infinite scrolling for model list

- Introduced pagination to the ModelDisplay component, allowing users to load models in increments of 50.
- Implemented IntersectionObserver to automatically load more models when the user scrolls to the bottom of the list.
- Added a loading indicator using CircularProgress to enhance user experience during model loading.
- Ensured that the visible model count resets when the model list changes, maintaining a smooth interaction.

Author: georgi

web/src/components/hugging_face/model_list/ModelDisplay.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { List, Typography } from "@mui/material";
+import { Box, CircularProgress, List, Typography } from "@mui/material";
 import ModelListItem from "./ModelListItem";
 import { UnifiedModel } from "../../../stores/ApiTypes";
 import { useModelManagerStore } from "../../../stores/ModelManagerStore";
@@ -19,6 +19,44 @@ const ModelDisplay: React.FC<ModelDisplayProps> = ({
   const { handleShowInExplorer, ollamaBasePath } = useModels();
   const downloadStore = useModelDownloadStore();
 
+  const PAGE_SIZE = 50;
+  const [visibleCount, setVisibleCount] = React.useState<number>(PAGE_SIZE);
+  const sentinelRef = React.useRef<HTMLDivElement | null>(null);
+
+  const visibleModels = React.useMemo(
+    () => models.slice(0, Math.min(visibleCount, models.length)),
+    [models, visibleCount]
+  );
+
+  const hasMore = visibleModels.length < models.length;
+
+  const loadMore = React.useCallback(() => {
+    if (!hasMore) return;
+    setVisibleCount((prev) => Math.min(prev + PAGE_SIZE, models.length));
+  }, [hasMore, models.length]);
+
+  // Reset pagination when the models set changes
+  React.useEffect(() => {
+    setVisibleCount(PAGE_SIZE);
+  }, [models]);
+
+  // IntersectionObserver to trigger loading more when sentinel enters view
+  React.useEffect(() => {
+    const node = sentinelRef.current;
+    if (!node) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (entry.isIntersecting) {
+          loadMore();
+        }
+      },
+      { root: null, rootMargin: "200px 0px", threshold: 0 }
+    );
+    observer.observe(node);
+    return () => observer.unobserve(node);
+  }, [loadMore, visibleModels.length]);
+
   const startDownload = React.useCallback(
     (model: UnifiedModel) => {
       const repoId = model.repo_id || model.id;
@@ -45,22 +83,34 @@ const ModelDisplay: React.FC<ModelDisplayProps> = ({
   const allowShowInExplorer = modelSource === "downloaded";
 
   return (
-    <List>
-      {models.map((model: UnifiedModel, idx: number) => (
-        <ModelListItem
-          key={`${model.id}-${idx}`}
-          model={model}
-          handleModelDelete={allowDelete ? handleDeleteClick : undefined}
-          onDownload={allowDownload ? () => startDownload(model) : undefined}
-          handleShowInExplorer={
-            allowShowInExplorer ? handleShowInExplorer : undefined
-          }
-          // hideMissingInfo={modelSource === "recommended"}
-          showModelStats={modelSource === "recommended"}
-          ollamaBasePath={ollamaBasePath}
-        />
-      ))}
-    </List>
+    <>
+      <List>
+        {visibleModels.map((model: UnifiedModel, idx: number) => (
+          <ModelListItem
+            key={`${model.id}-${idx}`}
+            model={model}
+            handleModelDelete={allowDelete ? handleDeleteClick : undefined}
+            onDownload={allowDownload ? () => startDownload(model) : undefined}
+            handleShowInExplorer={
+              allowShowInExplorer ? handleShowInExplorer : undefined
+            }
+            // hideMissingInfo={modelSource === "recommended"}
+            showModelStats={modelSource === "recommended"}
+            ollamaBasePath={ollamaBasePath}
+          />
+        ))}
+      </List>
+      <Box
+        ref={sentinelRef}
+        sx={{
+          display: hasMore ? "flex" : "none",
+          justifyContent: "center",
+          py: 2
+        }}
+      >
+        <CircularProgress size={20} />
+      </Box>
+    </>
   );
 };