From d05f524a7a03014f082fb6d33886b44dbb4a71dc Mon Sep 17 00:00:00 2001
From: vetalcore <vetalcore@gmail.com>
Date: Tue, 26 Mar 2024 10:30:23 +0200
Subject: [PATCH] =?UTF-8?q?fix(extension):=20load=20more=20stake=20pool=20?=
 =?UTF-8?q?grid=20items=20if=20all=20stake=20pools=20ar=E2=80=A6=20(#983)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(extension): load more stake pool grid items if all stake pools are unselected

* fix(extension): resolve sdet comments
---
 .../BrowsePools/StakePoolsGrid/Grid.tsx       | 29 ++++++++++++++++++-
 .../StakePoolsGrid/StakePoolsGrid.tsx         |  1 +
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/staking/src/features/BrowsePools/StakePoolsGrid/Grid.tsx b/packages/staking/src/features/BrowsePools/StakePoolsGrid/Grid.tsx
index 9e7b4a1c4..3440af41b 100644
--- a/packages/staking/src/features/BrowsePools/StakePoolsGrid/Grid.tsx
+++ b/packages/staking/src/features/BrowsePools/StakePoolsGrid/Grid.tsx
@@ -1,7 +1,9 @@
 /* eslint-disable react/no-multi-comp */
 import { Flex, useVisibleItemsCount } from '@lace/ui';
-import { useEffect, useLayoutEffect, useRef } from 'react';
+import debounce from 'lodash/debounce';
+import { RefObject, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { ListRange, VirtuosoGrid, VirtuosoGridProps } from 'react-virtuoso';
+import useResizeObserver from 'use-resize-observer';
 import * as cx from './StakePoolsGrid.css';
 
 export type GridProps<T> = VirtuosoGridProps<T, null> & {
@@ -11,8 +13,11 @@ export type GridProps<T> = VirtuosoGridProps<T, null> & {
   rowHeight: number;
   numberOfItemsPerRow?: number;
   scrollableTargetId?: string;
+  parentRef: RefObject<HTMLDivElement>;
 };
 
+const DEFAULT_DEBOUNCE = 200;
+
 export const Grid = <T extends Record<string, unknown> | undefined>({
   itemContent,
   items,
@@ -20,9 +25,11 @@ export const Grid = <T extends Record<string, unknown> | undefined>({
   rowHeight,
   numberOfItemsPerRow,
   scrollableTargetId = '',
+  parentRef,
 }: GridProps<T>) => {
   const tableReference = useRef<HTMLDivElement | null>(null);
   const scrollableTargetReference = useRef<VirtuosoGridProps<T, undefined>['customScrollParent']>();
+  const [overscan, setOverscan] = useState({ main: 0, reverse: 0 });
 
   useLayoutEffect(() => {
     if (scrollableTargetId) {
@@ -41,10 +48,30 @@ export const Grid = <T extends Record<string, unknown> | undefined>({
     }
   }, [initialRowsCount, loadMoreData, numberOfItemsPerRow, rowHeight]);
 
+  const updateGridOverscan = useCallback(() => {
+    if (!tableReference?.current || !parentRef?.current) return;
+    // VirtuosoGrid won't render more items in case it's top position (visible items count) changes, force it manually via overscan value
+    const tableVsParentHeightDiff =
+      parentRef.current.getBoundingClientRect().height - tableReference.current.getBoundingClientRect().height;
+    setOverscan({ main: tableVsParentHeightDiff, reverse: 0 });
+  }, [parentRef]);
+
+  useLayoutEffect(() => {
+    updateGridOverscan();
+  }, [updateGridOverscan]);
+
+  const onResize = useMemo(
+    () => debounce(updateGridOverscan, DEFAULT_DEBOUNCE, { leading: true }),
+    [updateGridOverscan]
+  );
+
+  useResizeObserver<HTMLElement>({ onResize, ref: parentRef });
+
   return (
     <Flex h="$fill" ref={tableReference} data-testid="stake-pool-list-scroll-wrapper">
       {items.length > 0 && scrollableTargetReference.current && (
         <VirtuosoGrid<T>
+          overscan={overscan}
           listClassName={cx.grid}
           data={items}
           customScrollParent={scrollableTargetReference.current}
diff --git a/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGrid.tsx b/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGrid.tsx
index f15cb9f76..446d3a7eb 100644
--- a/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGrid.tsx
+++ b/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGrid.tsx
@@ -104,6 +104,7 @@ export const StakePoolsGrid = ({
         <StakePoolsGridSkeleton columnCount={columnCount} rowCount={2} />
       ) : (
         <Grid<StakePoolDetails | undefined>
+          parentRef={ref}
           rowHeight={STAKE_POOL_CARD_HEIGHT}
           numberOfItemsPerRow={numberOfItemsPerRow}
           scrollableTargetId={scrollableTargetId}