Use paginator to load strategies

src/components/strategies/overview/StrategyContent.tsx

@@ -1,4 +1,4 @@
-import { FC, memo, ReactElement } from 'react';
+import { FC, memo, ReactElement, useEffect, useRef, useState } from 'react';
 import { StrategyWithFiat } from 'libs/queries';
 import { StrategyBlock } from 'components/strategies/overview/strategyBlock';
 import { StrategyBlockCreate } from 'components/strategies/overview/strategyBlock';
@@ -26,7 +26,7 @@ export const _StrategyContent: FC<Props> = ({
   layout = lsService.getItem('strategyLayout') || 'grid',
 }) => {
   const { belowBreakpoint } = useBreakpoints();
-
+  const [max, setMax] = useState(21);
   if (isPending) {
     return (
       <div key="loading" className="flex flex-grow items-center justify-center">
@@ -40,35 +40,62 @@ export const _StrategyContent: FC<Props> = ({
   if (!strategies?.length) return emptyElement;
 
   if (layout === 'table' && !belowBreakpoint('xl')) {
-    return <StrategyTable strategies={strategies} />;
+    return (
+      <>
+        <StrategyTable strategies={strategies.slice(0, max)} />
+        {max < strategies.length && (
+          <Paginator increase={() => setMax((v) => v + 21)} />
+        )}
+      </>
+    );
   }
 
   return (
-    <ul
-      data-testid="strategy-list"
-      className={cn('grid gap-20', styles.strategyList)}
-    >
-      {strategies.map((s, i) => {
-        const animate = i < 12;
-        const style = { ['--delay' as any]: `${i * 50}ms` };
-        return (
-          <StrategyBlock
-            key={s.id}
-            className={cn(
-              styles.strategyItem,
-              animate ? styles.animateItem : ''
-            )}
-            strategy={s}
-            isExplorer={isExplorer}
-            style={animate ? style : undefined}
-          />
-        );
-      })}
-      {!isExplorer && <StrategyBlockCreate />}
-    </ul>
+    <>
+      <ul
+        data-testid="strategy-list"
+        className={cn('grid gap-20', styles.strategyList)}
+      >
+        {strategies.slice(0, max).map((s, i) => {
+          const animate = i < 21;
+          const style = { ['--delay' as any]: `${i * 50}ms` };
+          return (
+            <StrategyBlock
+              key={s.id}
+              className={cn(
+                styles.strategyItem,
+                animate ? styles.animateItem : ''
+              )}
+              strategy={s}
+              isExplorer={isExplorer}
+              style={animate ? style : undefined}
+            />
+          );
+        })}
+        {!isExplorer && <StrategyBlockCreate />}
+      </ul>
+      {max < strategies.length && (
+        <Paginator increase={() => setMax((v) => v + 21)} />
+      )}
+    </>
   );
 };
 
+const Paginator = ({ increase }: { increase: () => any }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.intersectionRatio > 0) increase();
+      },
+      { rootMargin: '500px' }
+    );
+    observer.observe(ref.current!);
+    return () => observer.disconnect();
+  }, [increase]);
+  return <div ref={ref} className="invisible"></div>;
+};
+
 export const StrategyContent = memo(_StrategyContent, (prev, next) => {
   if (prev.isPending !== next.isPending) return false;
   if (prev.layout !== next.layout) return false;

src/components/strategies/overview/StrategyTable.tsx

@@ -1,7 +1,7 @@
 import { Link, useMatch } from '@tanstack/react-router';
 import { PairLogoName } from 'components/common/DisplayPair';
 import { StrategyWithFiat } from 'libs/queries';
-import { FC, useEffect, useId, useState } from 'react';
+import { FC, useId } from 'react';
 import { StrategyStatusTag } from './strategyBlock/StrategyBlockHeader';
 import { useFiatCurrency } from 'hooks/useFiatCurrency';
 import { prettifyNumber, tokenAmount } from 'utils/helpers';
@@ -11,9 +11,9 @@ import {
   ManageButtonIcon,
   StrategyBlockManage,
 } from './strategyBlock/StrategyBlockManage';
-import styles from './StrategyContent.module.css';
 import { FiatPrice } from 'components/common/FiatPrice';
 import { Tooltip } from 'components/common/tooltip/Tooltip';
+import styles from './StrategyContent.module.css';
 
 interface Props {
   strategies: StrategyWithFiat[];
@@ -35,12 +35,8 @@ export const StrategyTable: FC<Props> = ({ strategies }) => {
         </tr>
       </thead>
       <tbody>
-        {strategies.map((strategy, index) => (
-          <StrategyRow
-            strategy={strategy}
-            key={strategy.id}
-            initVisible={index < 10}
-          />
+        {strategies.map((strategy) => (
+          <StrategyRow strategy={strategy} key={strategy.id} />
         ))}
       </tbody>
     </table>
@@ -49,32 +45,14 @@ export const StrategyTable: FC<Props> = ({ strategies }) => {
 
 interface RowProps {
   strategy: StrategyWithFiat;
-  initVisible: boolean;
 }
-const StrategyRow: FC<RowProps> = ({ strategy, initVisible }) => {
+const StrategyRow: FC<RowProps> = ({ strategy }) => {
   const id = useId();
   const { base, quote, status, order0, order1 } = strategy;
   const isExplorer = !!useMatch({ from: '/explore', shouldThrow: false });
   const { selectedFiatCurrency: currentCurrency } = useFiatCurrency();
   const totalBalance = strategy.fiatBudget.total;
 
-  const [visible, setVisible] = useState(initVisible);
-
-  useEffect(() => {
-    if (visible) return;
-    const el = document.getElementById(id);
-    if (!el) return;
-    const observer = new IntersectionObserver((entries) => {
-      for (const entry of entries) {
-        setVisible(entry.intersectionRatio > 0);
-      }
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [id, visible]);
-
-  if (!visible) return <tr id={id} key={id} className="h-[85px]"></tr>;
-
   return (
     <tr key={id} id={id} className="h-[85px]">
       <td>{strategy.idDisplay}</td>

src/components/strategies/overview/strategyBlock/StrategyBlock.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, FC, useEffect, useId, useState } from 'react';
+import { CSSProperties, FC, useId } from 'react';
 import { StrategyWithFiat } from 'libs/queries';
 import { StrategyBlockBuySell } from 'components/strategies/overview/strategyBlock/StrategyBlockBuySell';
 
@@ -21,19 +21,6 @@ export const StrategyBlock: FC<Props> = ({
   isExplorer,
 }) => {
   const id = useId();
-  const [visible, setVisible] = useState(false);
-  useEffect(() => {
-    if (visible) return;
-    const el = document.getElementById(id);
-    if (!el) return;
-    const observer = new IntersectionObserver((entries) => {
-      for (const entry of entries) {
-        setVisible(entry.intersectionRatio > 0);
-      }
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [id, visible]);
 
   return (
     <li
@@ -45,28 +32,24 @@ export const StrategyBlock: FC<Props> = ({
       style={style}
       data-testid={`${strategy.base.symbol}/${strategy.quote.symbol}`}
     >
-      {visible && (
-        <>
-          <StrategyBlockHeader strategy={strategy} isExplorer={isExplorer} />
-          <StrategyBlockInfo strategy={strategy} />
-          <div
-            className={cn(
-              'rounded-8 border-background-800 grid grid-cols-2 grid-rows-[auto_auto] border-2',
-              strategy.status === 'active' ? '' : 'opacity-50'
-            )}
-          >
-            <StrategyBlockBuySell
-              strategy={strategy}
-              buy
-              className="border-background-800 border-r-2"
-            />
-            <StrategyBlockBuySell strategy={strategy} />
-            <div className="border-background-800 col-start-1 col-end-3 border-t-2">
-              <StrategyGraph strategy={strategy} />
-            </div>
-          </div>
-        </>
-      )}
+      <StrategyBlockHeader strategy={strategy} isExplorer={isExplorer} />
+      <StrategyBlockInfo strategy={strategy} />
+      <div
+        className={cn(
+          'rounded-8 border-background-800 grid grid-cols-2 grid-rows-[auto_auto] border-2',
+          strategy.status === 'active' ? '' : 'opacity-50'
+        )}
+      >
+        <StrategyBlockBuySell
+          strategy={strategy}
+          buy
+          className="border-background-800 border-r-2"
+        />
+        <StrategyBlockBuySell strategy={strategy} />
+        <div className="border-background-800 col-start-1 col-end-3 border-t-2">
+          <StrategyGraph strategy={strategy} />
+        </div>
+      </div>
     </li>
   );
 };