feat: Lazy loading graphs from a pool list

packages/web/src/components/earn/pool-info-lazy-chart/PoolInfoLazyChart.styles.ts

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+
+export const PoolInfoLazyChartWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+`;

packages/web/src/components/earn/pool-info-lazy-chart/PoolInfoLazyChart.tsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { PoolInfoLazyChartWrapper } from "./PoolInfoLazyChart.styles";
+import PoolGraph from "@components/common/pool-graph/PoolGraph";
+import { PoolListInfo } from "@models/pool/info/pool-list-info";
+import { useTheme } from "@emotion/react";
+import { SkeletonItem } from "@components/common/table-skeleton/TableSkeleton.styles";
+import { cx } from "@emotion/css";
+import { POOL_INFO, pulseSkeletonStyle } from "@constants/skeleton.constant";
+import { useGetSimpleBinsByPath } from "@query/pools";
+
+export interface PoolInfoLazyChartProps {
+  width: number;
+  pool: PoolListInfo;
+}
+
+const SKELETON_OPTION = POOL_INFO.list[POOL_INFO.list.length - 1];
+
+const PoolInfoLazyChart: React.FC<PoolInfoLazyChartProps> = ({
+  pool,
+  width,
+}) => {
+  const { tokenA, tokenB, price, currentTick } = pool;
+  const { themeKey } = useTheme();
+
+  const observerRef = useRef<HTMLDivElement | null>(null);
+  const [display, setDisplay] = useState(false);
+
+  const { data: bins } = useGetSimpleBinsByPath(pool.poolId, display);
+
+  const isHideBar = useMemo(() => {
+    if (!bins) {
+      return true;
+    }
+    const isAllReserveZeroBin = bins.every(
+      item =>
+        Number(item.reserveTokenA) === 0 && Number(item.reserveTokenB) === 0,
+    );
+    return isAllReserveZeroBin;
+  }, [bins]);
+
+  const visibleSkeleton = useMemo(() => {
+    return !display || !bins;
+  }, [display, bins]);
+
+  useEffect(() => {
+    let observer: IntersectionObserver | null = null;
+    if (observerRef.current && !display) {
+      observer = new IntersectionObserver(([entry]) => {
+        if (entry.isIntersecting) {
+          setDisplay(true);
+        }
+      });
+
+      observer.observe(observerRef.current);
+    }
+
+    return () => {
+      if (observerRef.current) {
+        (observer as IntersectionObserver | null)?.unobserve(
+          // eslint-disable-next-line react-hooks/exhaustive-deps
+          observerRef.current,
+        );
+      }
+    };
+  }, [display, observerRef, pool.poolId]);
+
+  return (
+    <PoolInfoLazyChartWrapper ref={observerRef}>
+      {visibleSkeleton ? (
+        <SkeletonItem
+          className={cx({
+            left: SKELETON_OPTION.left,
+          })}
+          tdWidth={width}
+        >
+          <span
+            css={pulseSkeletonStyle({
+              w: width,
+              type: SKELETON_OPTION.type,
+            })}
+          />
+        </SkeletonItem>
+      ) : (
+        <PoolGraph
+          width={100}
+          height={45}
+          tokenA={tokenA}
+          tokenB={tokenB}
+          currentTick={currentTick}
+          bins={bins ?? []}
+          mouseover
+          showBar={!isHideBar}
+          themeKey={themeKey}
+          position="top"
+          nextSpacing={false}
+          poolPrice={Number(price)}
+        />
+      )}
+    </PoolInfoLazyChartWrapper>
+  );
+};
+
+export default PoolInfoLazyChart;

packages/web/src/components/earn/pool-info/PoolInfo.tsx

@@ -9,11 +9,11 @@ import React, { useMemo } from "react";
 import { PoolInfoWrapper, TableColumn } from "./PoolInfo.styles";
 import { PoolListInfo } from "@models/pool/info/pool-list-info";
 import { SwapFeeTierInfoMap } from "@constants/option.constant";
-import PoolGraph from "@components/common/pool-graph/PoolGraph";
 import OverlapLogo from "@components/common/overlap-logo/OverlapLogo";
 import { useGnotToGnot } from "@hooks/token/use-gnot-wugnot";
 import { DEVICE_TYPE } from "@styles/media";
 import { numberToRate } from "@utils/string-utils";
+import PoolInfoLazyChart from "../pool-info-lazy-chart/PoolInfoLazyChart";
 
 interface PoolInfoProps {
   pool: PoolListInfo;
@@ -22,12 +22,7 @@ interface PoolInfoProps {
   breakpoint: DEVICE_TYPE;
 }
 
-const PoolInfo: React.FC<PoolInfoProps> = ({
-  pool,
-  routeItem,
-  themeKey,
-  breakpoint,
-}) => {
+const PoolInfo: React.FC<PoolInfoProps> = ({ pool, routeItem, breakpoint }) => {
   const {
     poolId,
     tokenA,
@@ -37,10 +32,7 @@ const PoolInfo: React.FC<PoolInfoProps> = ({
     volume24h,
     fees24h,
     rewardTokens,
-    bins,
-    price,
     tvl,
-    bins40,
   } = pool;
   const { getGnotPath } = useGnotToGnot();
   const rewardImage = useMemo(() => {
@@ -59,18 +51,10 @@ const PoolInfo: React.FC<PoolInfoProps> = ({
     breakpoint === DEVICE_TYPE.MOBILE
       ? POOL_TD_WIDTH_MOBILE
       : breakpoint === DEVICE_TYPE.TABLET_M
-        ? POOL_TD_WIDTH_SMALL_TABLET
-        : breakpoint === DEVICE_TYPE.TABLET
-          ? POOL_TD_WIDTH_TABLET
-          : POOL_TD_WIDTH;
-
-  const isHideBar = useMemo(() => {
-    const isAllReserveZeroBin40 = bins40.every(item => Number(item.reserveTokenA) === 0 && Number(item.reserveTokenB) === 0);
-    const isAllReserveZeroBin = bins.every(item => Number(item.reserveTokenA) === 0 && Number(item.reserveTokenB) === 0);
-
-    return (isAllReserveZeroBin40 && isAllReserveZeroBin);
-  }, [bins, bins40]);
-
+      ? POOL_TD_WIDTH_SMALL_TABLET
+      : breakpoint === DEVICE_TYPE.TABLET
+      ? POOL_TD_WIDTH_TABLET
+      : POOL_TD_WIDTH;
 
   return (
     <PoolInfoWrapper onClick={() => routeItem(poolId)}>
@@ -104,20 +88,7 @@ const PoolInfo: React.FC<PoolInfoProps> = ({
       <TableColumn tdWidth={tdWidth[5]}>{rewardImage}</TableColumn>
       <TableColumn tdWidth={tdWidth[6]} onClick={e => e.stopPropagation()}>
         <div className="chart-wrapper">
-          <PoolGraph
-            width={100}
-            height={45}
-            tokenA={tokenA}
-            tokenB={tokenB}
-            currentTick={pool.currentTick}
-            bins={bins ?? []}
-            mouseover
-            showBar={!isHideBar}
-            themeKey={themeKey}
-            position="top"
-            nextSpacing={false}
-            poolPrice={Number(price)}
-          />
+          <PoolInfoLazyChart pool={pool} width={tdWidth[6]} />
         </div>
       </TableColumn>
     </PoolInfoWrapper>

packages/web/src/constants/table.constant.ts

@@ -0,0 +1,3 @@
+export const MAIN_TOKEN_LIST_SIZE = 100;
+
+export const EARN_POOL_LIST_SIZE = 50;

packages/web/src/containers/pool-list-container/PoolListContainer.tsx

@@ -13,6 +13,8 @@ import { PoolListInfo } from "@models/pool/info/pool-list-info";
 import { useLoading } from "@hooks/common/use-loading";
 import { INCENTIVE_TYPE } from "@constants/option.constant";
 import { isNumber } from "@utils/number-utils";
+import { EARN_POOL_LIST_SIZE } from "@constants/table.constant";
+
 export interface Pool {
   poolId: string;
   tokenPair: TokenPairInfo;
@@ -44,7 +46,13 @@ export const TABLE_HEAD = {
   LIQUIDITY_PLOT: "Liquidity Plot",
 } as const;
 
-export const SORT_SUPPORT_HEAD = ["Pool Name", "TVL", "Volume (24h)", "Fees (24h)", "APR"];
+export const SORT_SUPPORT_HEAD = [
+  "Pool Name",
+  "TVL",
+  "Volume (24h)",
+  "Fees (24h)",
+  "APR",
+];
 
 export type TABLE_HEAD = ValuesType<typeof TABLE_HEAD>;
 
@@ -84,7 +92,7 @@ const PoolListContainer: React.FC = () => {
 
   // 10K -> 10000, 20M -> 2000000 ...
   const convertKMBtoNumber = (kmbValue: string) => {
-    const sizesMap: { [key: string]: number; } = {
+    const sizesMap: { [key: string]: number } = {
       K: 1_000,
       M: 1_000_000,
       B: 1_000_000_000,
@@ -122,7 +130,10 @@ const PoolListContainer: React.FC = () => {
   };
 
   const sortedPoolListInfos = useMemo(() => {
-    function filteredPoolType(poolType: POOL_TYPE, incentivizedType: INCENTIVE_TYPE) {
+    function filteredPoolType(
+      poolType: POOL_TYPE,
+      incentivizedType: INCENTIVE_TYPE,
+    ) {
       switch (poolType) {
         case "Incentivized":
           return incentivizedType !== "NONE_INCENTIVIZED";
@@ -136,53 +147,87 @@ const PoolListContainer: React.FC = () => {
 
     const temp = poolListInfos.filter(info => {
       if (keyword !== "") {
-        return info.tokenA.name.toLowerCase().includes(keyword.toLowerCase()) ||
+        return (
+          info.tokenA.name.toLowerCase().includes(keyword.toLowerCase()) ||
           info.tokenB.name.toLowerCase().includes(keyword.toLowerCase()) ||
           info.tokenA.symbol.toLowerCase().includes(keyword.toLowerCase()) ||
-          info.tokenB.symbol.toLowerCase().includes(keyword.toLowerCase());
+          info.tokenB.symbol.toLowerCase().includes(keyword.toLowerCase())
+        );
       }
       return true;
     });
     if (sortOption) {
       if (sortOption.key === TABLE_HEAD.POOL_NAME) {
         if (sortOption.direction === "asc") {
-          temp.sort((a: PoolListInfo, b: PoolListInfo) => b.tokenA.name.localeCompare(a.tokenA.name));
+          temp.sort((a: PoolListInfo, b: PoolListInfo) =>
+            b.tokenA.name.localeCompare(a.tokenA.name),
+          );
         } else {
-          temp.sort((a: PoolListInfo, b: PoolListInfo) => a.tokenA.name.localeCompare(b.tokenA.name));
+          temp.sort((a: PoolListInfo, b: PoolListInfo) =>
+            a.tokenA.name.localeCompare(b.tokenA.name),
+          );
         }
       } else if (sortOption.key === TABLE_HEAD.TVL) {
         if (sortOption.direction === "asc") {
-          temp.sort((a: PoolListInfo, b: PoolListInfo) => sortValueTransform(a.tvl) - sortValueTransform(b.tvl));
+          temp.sort(
+            (a: PoolListInfo, b: PoolListInfo) =>
+              sortValueTransform(a.tvl) - sortValueTransform(b.tvl),
+          );
         } else {
-          temp.sort((a: PoolListInfo, b: PoolListInfo) => - sortValueTransform(a.tvl) + sortValueTransform(b.tvl));
+          temp.sort(
+            (a: PoolListInfo, b: PoolListInfo) =>
+              -sortValueTransform(a.tvl) + sortValueTransform(b.tvl),
+          );
         }
       } else if (sortOption.key === TABLE_HEAD.VOLUME) {
         if (sortOption.direction === "asc") {
-          temp.sort((a: PoolListInfo, b: PoolListInfo) => sortValueTransform(a.volume24h) - sortValueTransform(b.volume24h));
+          temp.sort(
+            (a: PoolListInfo, b: PoolListInfo) =>
+              sortValueTransform(a.volume24h) - sortValueTransform(b.volume24h),
+          );
         } else {
-          temp.sort((a: PoolListInfo, b: PoolListInfo) => - sortValueTransform(a.volume24h) + sortValueTransform(b.volume24h));
+          temp.sort(
+            (a: PoolListInfo, b: PoolListInfo) =>
+              -sortValueTransform(a.volume24h) +
+              sortValueTransform(b.volume24h),
+          );
         }
       } else if (sortOption.key === TABLE_HEAD.FEES) {
         if (sortOption.direction === "asc") {
-          temp.sort((a: PoolListInfo, b: PoolListInfo) => sortValueTransform(a.fees24h) - sortValueTransform(b.fees24h));
+          temp.sort(
+            (a: PoolListInfo, b: PoolListInfo) =>
+              sortValueTransform(a.fees24h) - sortValueTransform(b.fees24h),
+          );
         } else {
-          temp.sort((a: PoolListInfo, b: PoolListInfo) => - sortValueTransform(a.fees24h) + sortValueTransform(b.fees24h));
+          temp.sort(
+            (a: PoolListInfo, b: PoolListInfo) =>
+              -sortValueTransform(a.fees24h) + sortValueTransform(b.fees24h),
+          );
         }
       } else if (sortOption.key === TABLE_HEAD.APR) {
         if (sortOption.direction === "asc") {
-          temp.sort((a: PoolListInfo, b: PoolListInfo) => sortValueTransform(a.apr) - sortValueTransform(b.apr));
+          temp.sort(
+            (a: PoolListInfo, b: PoolListInfo) =>
+              sortValueTransform(a.apr) - sortValueTransform(b.apr),
+          );
         } else {
-          temp.sort((a: PoolListInfo, b: PoolListInfo) => - sortValueTransform(a.apr) + sortValueTransform(b.apr));
+          temp.sort(
+            (a: PoolListInfo, b: PoolListInfo) =>
+              -sortValueTransform(a.apr) + sortValueTransform(b.apr),
+          );
         }
       }
     } else {
-      temp.sort((a: PoolListInfo, b: PoolListInfo) => - sortValueTransform(a.tvl) + sortValueTransform(b.tvl));
+      temp.sort(
+        (a: PoolListInfo, b: PoolListInfo) =>
+          -sortValueTransform(a.tvl) + sortValueTransform(b.tvl),
+      );
     }
-    return temp.filter((info) => filteredPoolType(poolType, info.incentiveType));
+    return temp.filter(info => filteredPoolType(poolType, info.incentiveType));
   }, [keyword, poolListInfos, poolType, sortOption]);
 
   const totalPage = useMemo(() => {
-    return Math.ceil(sortedPoolListInfos.length / 15);
+    return Math.ceil(sortedPoolListInfos.length / EARN_POOL_LIST_SIZE);
   }, [sortedPoolListInfos.length]);
 
   const routeItem = (id: string) => {
@@ -226,8 +271,8 @@ const PoolListContainer: React.FC = () => {
         sortOption?.key !== item
           ? "desc"
           : sortOption.direction === "asc"
-            ? "desc"
-            : "asc";
+          ? "desc"
+          : "asc";
 
       setTokenSortOption({
         key,
@@ -244,7 +289,10 @@ const PoolListContainer: React.FC = () => {
 
   return (
     <PoolList
-      pools={sortedPoolListInfos.slice(page * 15, (page + 1) * 15)}
+      pools={sortedPoolListInfos.slice(
+        page * EARN_POOL_LIST_SIZE,
+        (page + 1) * EARN_POOL_LIST_SIZE,
+      )}
       isFetched={isFetchedPools && !isLoadingCommon}
       poolType={poolType}
       changePoolType={changePoolType}
@@ -266,4 +314,4 @@ const PoolListContainer: React.FC = () => {
   );
 };
 
-export default PoolListContainer;
+export default PoolListContainer;