akanjs 2.3.5-rc.2 → 2.3.5-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "2.3.5-rc.2",
+  "version": "2.3.5-rc.3",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {

package/ui/InfiniteScroll.tsx

@@ -22,6 +22,7 @@ export const InfiniteScroll = ({
   reverse,
 }: InfiniteScrollProps) => {
   const [isFetching, setIsFetching] = useState(false);
+  const isFetchingRef = useRef(false);
   const target = useRef<HTMLDivElement>(null);
   const page = useRef<number>(currentPage);
   const totalPages = Math.ceil(total / (itemsPerPage || 1));
@@ -38,14 +39,39 @@ export const InfiniteScroll = ({
   }, []);
 
   const fetchMoreItems = async () => {
-    if (isFetching) return;
+    if (isFetchingRef.current) return;
     const nextPage = page.current + 1;
     if (nextPage > totalPages) return;
+
+    const scroller = reverse ? document.scrollingElement : null;
+    const prevScrollHeight = scroller?.scrollHeight ?? 0;
+    const prevScrollTop = scroller?.scrollTop ?? 0;
+
+    isFetchingRef.current = true;
     setIsFetching(true);
-    await onAddPage(nextPage);
-    onPageSelect(nextPage);
-    setIsFetching(false);
-    page.current = nextPage;
+    try {
+      await onAddPage(nextPage);
+      onPageSelect(nextPage);
+      page.current = nextPage;
+
+      const restoreScroll = () => {
+        if (scroller) {
+          scroller.scrollTop = prevScrollTop + (scroller.scrollHeight - prevScrollHeight);
+        }
+        isFetchingRef.current = false;
+        setIsFetching(false);
+      };
+
+      if (typeof requestAnimationFrame === "function") {
+        requestAnimationFrame(restoreScroll);
+      } else {
+        restoreScroll();
+      }
+    } catch (error) {
+      isFetchingRef.current = false;
+      setIsFetching(false);
+      throw error;
+    }
   };
 
   return (

package/ui/More.tsx

@@ -1,8 +1,10 @@
 "use client";
 import { clsx, isMobileDevice } from "akanjs/client";
-import { InfiniteScroll } from "./InfiniteScroll";
+import { lazy } from "akanjs/webkit";
 import { Pagination } from "./Pagination";
 
+const InfiniteScroll = lazy(() => import("./InfiniteScroll").then((mod) => mod.InfiniteScroll), { ssr: false });
+
 interface MoreProps {
   total: number;
   itemsPerPage: number;