add loading spinner on PoolListing

app/javascript/src/pages/Home/PoolListing.tsx

@@ -3,17 +3,20 @@ import React, { useEffect, useState } from "react";
 import { useLazyLoadQuery } from "react-relay";
 import { ethers } from "ethers";
 
-import { pools } from "../../constants/Pools";
+import { unfinishedPools } from "../../constants/Pools";
 import { useBsc } from "../../contexts/BscProvider";
 import type { PoolConfig } from "../../types";
 import { Pool } from "./Pool";
 import sousChef from "../../abi/sousChef.json";
 import { getEndBlock } from "../../utils/getEndBlock";
 import type { PoolListingQuery } from "./__generated__/PoolListingQuery.graphql";
+import { notEmpty } from "../../utils/notEmpty";
+import { Spinner } from "../../components";
 
 export const PoolListing = () => {
   const { provider } = useBsc();
   const [validPools, setValidPools] = useState<PoolConfig[]>([]);
+  const [isLoadingPools, setIsLoadingPools] = useState(true);
 
   const { currentUser } = useLazyLoadQuery<PoolListingQuery>(
     graphql`
@@ -42,35 +45,34 @@ export const PoolListing = () => {
         );
       };
 
-      const valids: PoolConfig[] = [];
-
-      pools.forEach(async (pool) => {
-        if (pool.sousId === 0) {
-          valids.push(pool);
-          setValidPools([...valids]);
-
-          return;
-        }
-
-        try {
-          const chef = getChef(pool);
-          const endBlock = await getEndBlock(chef);
-
-          if (endBlock >= blockNumber) {
-            valids.push(pool);
-            setValidPools([...valids]);
+      await Promise.all(
+        unfinishedPools.map(async (pool) => {
+          if (pool.sousId === 0) {
+            return pool;
           }
-        } catch (e) {
-          console.error(e);
-        }
+
+          try {
+            const chef = getChef(pool);
+            const endBlock = await getEndBlock(chef);
+
+            if (endBlock >= blockNumber) {
+              return pool;
+            }
+          } catch (e) {
+            console.error(e);
+          }
+        })
+      ).then((pools) => {
+        setIsLoadingPools(false);
+        setValidPools(pools.filter(notEmpty));
       });
     })();
   }, [provider]);
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 place-items-center w-full gap-8 py-4 -mt-16 overflow-x-hidden">
+      {isLoadingPools && <Spinner />}
       {validPools
-        .filter((pool) => !pool.isFinished)
         .sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0))
         .map((pool) => (
           <Pool key={pool.sousId} pool={pool} balance={balance} />