LoadRange implemented in search

src/routes/Search/Search.js

@@ -3,13 +3,16 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
+const debounce = require('lodash.debounce');
 const Icon = require('@stremio/stremio-icons/dom');
-const { Image, MainNavBars, MetaRow, MetaItem, useDeepEqualMemo } = require('stremio/common');
+const { Image, MainNavBars, MetaRow, MetaItem, useDeepEqualMemo, getVisibleChildrenRange } = require('stremio/common');
 const useSearch = require('./useSearch');
 const styles = require('./styles');
 
+const THRESHOLD = 100;
+
 const Search = ({ queryParams }) => {
-    const search = useSearch(queryParams);
+    const [search, loadSearchRows] = useSearch(queryParams);
     const query = useDeepEqualMemo(() => {
         return search.selected !== null ?
             search.selected.extra.reduceRight((query, [name, value]) => {
@@ -22,9 +25,26 @@ const Search = ({ queryParams }) => {
             :
             null;
     }, [search.selected]);
+    const scrollContainerRef = React.useRef();
+    const onVisibleRangeChange = React.useCallback(() => {
+        if (search.catalogs.length === 0) {
+            return;
+        }
+
+        const range = getVisibleChildrenRange(scrollContainerRef.current, THRESHOLD);
+        if (range === null) {
+            return;
+        }
+
+        loadSearchRows(range);
+    }, [search.catalogs]);
+    const onScroll = React.useCallback(debounce(onVisibleRangeChange, 250), [onVisibleRangeChange]);
+    React.useLayoutEffect(() => {
+        onVisibleRangeChange();
+    }, [search.catalogs, onVisibleRangeChange]);
     return (
         <MainNavBars className={styles['search-container']} route={'search'} query={query}>
-            <div className={styles['search-content']}>
+            <div ref={scrollContainerRef} className={styles['search-content']} onScroll={onScroll}>
                 {
                     query === null ?
                         <div className={styles['search-hints-container']}>

src/routes/Search/styles.less

@@ -22,15 +22,7 @@
         overflow-y: auto;
 
         .search-row {
-            margin: 4rem 2rem;
-
-            &:first-child {
-                margin-top: 2rem;
-            }
-
-            &:last-child {
-                margin-bottom: 2rem;
-            }
+            padding: 2rem;
         }
 
         .search-hints-container {

src/routes/Search/useSearch.js

@@ -54,7 +54,17 @@ const useSearch = (queryParams) => {
             };
         }
     }, [queryParams]);
-    return useModelState({ model: 'search', action, init });
+    const loadRange = React.useCallback((range) => {
+        core.transport.dispatch({
+            action: 'CatalogsWithExtra',
+            args: {
+                action: 'LoadRange',
+                args: range
+            }
+        }, 'search');
+    }, []);
+    const search = useModelState({ model: 'search', action, init });
+    return [search, loadRange];
 };
 
 module.exports = useSearch;