add loading spinner on PoolListing

app/javascript/src/components/Navbar/Navbar.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { MenuIcon } from "@heroicons/react/outline";
 
 import XStakeLogo from "../../assets/images/logo.png";
 import { useApp } from "../../contexts/AppProvider";
@@ -23,23 +24,10 @@ export const Navbar = () => {
   return (
     <nav className="w-full h-16 flex bg-white shadow items-center px-4 space-x-2 z-50">
       <button
-        className="w-12 md:w-10 h-12 md:h-10 xl:hidden fixed md:relative bottom-8 md:bottom-auto right-8 md:right-auto bg-white rounded-full p-3 md:p-0 shadow md:shadow-none"
+        className="w-12 mr-2 md:w-10 h-12 md:h-10 xl:hidden fixed md:relative bottom-8 md:bottom-auto right-8 md:right-auto bg-white rounded-full p-3 md:p-0 shadow md:shadow-none"
         onClick={() => handleExpandSideNav()}
       >
-        <svg
+        <MenuIcon />
-          xmlns="http://www.w3.org/2000/svg"
-          className="h-full w-full"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M4 6h16M4 12h16M4 18h16"
-          />
-        </svg>
       </button>
       <img
         src={XStakeLogo}

app/javascript/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,21 @@
+import type { FC } from "react";
+import React from "react";
+import cs from "classnames";
+
+type Props = {
+  sizeClasses?: string;
+};
+
+export const Spinner: FC<Props> = ({ sizeClasses }) => {
+  return (
+    <div className="absolute right-1/2 bottom-1/2  transform translate-x-1/2 translate-y-1/2 ">
+      <div
+        style={{ borderTopColor: "transparent" }}
+        className={cs(
+          "border-solid animate-spin  rounded-full border-gray-300 border-8",
+          sizeClasses ?? "h-20 w-20"
+        )}
+      />
+    </div>
+  );
+};

app/javascript/src/components/Spinner/index.ts

@@ -0,0 +1 @@
+export * from "./Spinner";

app/javascript/src/components/index.ts

@@ -3,3 +3,4 @@ export * from "./SideNav";
 export * from "./Modal";
 export * from "./Input";
 export * from "./Button";
+export * from "./Spinner";

app/javascript/src/constants/Pools.ts

@@ -2635,3 +2635,5 @@ export const pools: PoolConfig[] = [
     isFinished: true,
   },
 ];
+
+export const unfinishedPools = pools.filter((pool) => !pool.isFinished);

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,14 +45,10 @@ export const PoolListing = () => {
         );
       };
 
-      const valids: PoolConfig[] = [];
+      await Promise.all(
-
+        unfinishedPools.map(async (pool) => {
-      pools.forEach(async (pool) => {
           if (pool.sousId === 0) {
-          valids.push(pool);
+            return pool;
-          setValidPools([...valids]);
-
-          return;
           }
 
           try {
@@ -57,20 +56,23 @@ export const PoolListing = () => {
             const endBlock = await getEndBlock(chef);
 
             if (endBlock >= blockNumber) {
-            valids.push(pool);
+              return pool;
-            setValidPools([...valids]);
             }
           } 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} />

app/javascript/src/utils/notEmpty.ts

@@ -0,0 +1,3 @@
+// Use a type predicate function to avoid opting out of strict type checking: https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates
+export const notEmpty = <T>(value: T | null | undefined): value is T =>
+  value !== null && value !== undefined;