Merge pull request #121 from UW-Macrostrat/infinite-scroll-fix

Infinite scroll fix

Author: davidsklar99

packages/ui-components/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [4.3.2] - 2025-07-03
+
+- Fixed infinite loading issue on mount
+
 ## [4.3.1] - 2025-07-02
 
 - Updated infinite scorlling to take `delay` as input param (default 100ms)

packages/ui-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/ui-components",
-  "version": "4.3.1",
+  "version": "4.3.2",
   "description": "UI components for React and Blueprint.js",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

packages/ui-components/src/infinite-scroll.ts

@@ -147,7 +147,7 @@ function InfiniteScrollView<T>(props: InfiniteScrollProps<T>) {
     route,
     params,
     opts,
-    placeholder,
+    placeholder = (p: APIPlaceholderProps) => h(Spinner),
     className,
     itemComponent = JSONView,
     loadingPlaceholder = LoadingPlaceholder,
@@ -160,7 +160,15 @@ function InfiniteScrollView<T>(props: InfiniteScrollProps<T>) {
     delay,
   } = props;
   const { get } = useAPIActions();
-  const { getCount, getNextParams, getItems, hasMore } = props;
+  const {
+    getCount = () => null,
+    getNextParams = (response, params) => {
+      const lastPage = params.page ?? 0;
+      return { ...params, page: lastPage + 1 };
+    },
+    getItems = (d) => d,
+    hasMore = (d) => true,
+  } = props;
 
   const initialState: ScrollState<T> = {
     items: initialItems,
@@ -179,13 +187,6 @@ function InfiniteScrollView<T>(props: InfiniteScrollProps<T>) {
 
   const loadingRef = useRef(false);
 
-  const mountedRef = useRef(true);
-  useEffect(() => {
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
-
   const loadPage = useCallback(
     async (action: LoadPage<T>) => {
       if (loadingRef.current) return; // Prevent concurrent loads
@@ -195,7 +196,6 @@ function InfiniteScrollView<T>(props: InfiniteScrollProps<T>) {
 
       try {
         const res = await get(route, action.params, opts);
-        if (!mountedRef.current) return;
 
         const itemVals = getItems(res);
         const nextParams = getNextParams(res, action.params);
@@ -215,7 +215,7 @@ function InfiniteScrollView<T>(props: InfiniteScrollProps<T>) {
           },
         });
       } catch (error) {
-        if (!mountedRef.current) return;
+        console.error("Error loading page:", error);
         action.dispatch({
           type: "update-state",
           spec: { error: { $set: error }, isLoadingPage: { $set: null } },
@@ -298,21 +298,4 @@ function InfiniteScrollView<T>(props: InfiniteScrollProps<T>) {
   );
 }
 
-InfiniteScrollView.defaultProps = {
-  hasMore() {
-    return true;
-  },
-  getItems(d) {
-    return d;
-  },
-  getCount() {
-    return null;
-  },
-  getNextParams(response, params) {
-    const lastPage = params.page ?? 0;
-    return { ...params, page: lastPage + 1 };
-  },
-  placeholder: (p: APIPlaceholderProps) => h(Spinner),
-};
-
 export { InfiniteScrollView };