LoadRange action dispatched on scroll

src/routes/Board/Board.js

@@ -11,14 +11,28 @@ const styles = require('./styles');
 const Board = () => {
     const profile = useProfile();
     const streamingServer = useStreamingServer();
-    const board = useBoard();
+    const [board, loadBoardCatalogs] = useBoard();
     const continueWatchingPreview = useContinueWatchingPreview();
     const boardCatalogsOffset = continueWatchingPreview.libraryItems.length > 0 ? 1 : 0;
     const scrollContainerRef = React.useRef();
     const virtualizer = useVirtual({
-        size: board.catalogs.length + boardCatalogsOffset,
         parentRef: scrollContainerRef,
+        size: board.catalogs.length + boardCatalogsOffset,
+        overscan: 1
     });
+    React.useEffect(() => {
+        if (virtualizer.virtualItems.length === 0) {
+            return;
+        }
+
+        const start = Math.max(0, virtualizer.virtualItems[0].index - boardCatalogsOffset);
+        const end = virtualizer.virtualItems[virtualizer.virtualItems.length - 1].index - boardCatalogsOffset;
+        if (end < start) {
+            return;
+        }
+
+        loadBoardCatalogs(start, end);
+    }, [virtualizer.virtualItems, boardCatalogsOffset]);
     return (
         <div className={styles['board-container']}>
             <MainNavBars className={styles['board-content-container']} route={'board'}>

src/routes/Board/useBoard.js

@@ -1,6 +1,8 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 const React = require('react');
+const debounce = require('lodash.debounce');
+const { useServices } = require('stremio/services');
 const { useModelState } = require('stremio/common');
 
 const init = () => ({
@@ -9,6 +11,7 @@ const init = () => ({
 });
 
 const useBoard = () => {
+    const { core } = useServices();
     const action = React.useMemo(() => ({
         action: 'Load',
         args: {
@@ -16,7 +19,17 @@ const useBoard = () => {
             args: { extra: [] }
         }
     }), []);
-    return useModelState({ model: 'board', timeout: 1500, action, init });
+    const loadRange = React.useCallback(debounce((start, end) => {
+        core.transport.dispatch({
+            action: 'CatalogsWithExtra',
+            args: {
+                action: 'LoadRange',
+                args: { start, end }
+            }
+        }, 'board');
+    }, 100), []);
+    const board = useModelState({ model: 'board', timeout: 1500, action, init });
+    return [board, loadRange];
 };
 
 module.exports = useBoard;