fix(extension): load more stake pool grid items if all stake pools ar… (

#983)

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

* fix(extension): resolve sdet comments

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,18 +13,23 @@ 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,
   loadMoreData,
   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}

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}