Merge pull request #789 from alleslabs/fix/removing-pool-loading-overlay

fix: pool list overlay

CHANGELOG.md

@@ -77,6 +77,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#789](https://github.com/alleslabs/celatone-frontend/pull/789) Remove loading overlay on pool list page causing the page look like flicking
 - [#783](https://github.com/alleslabs/celatone-frontend/pull/783) Fix link used for Osmosis Pool JSON To poolmanager
 - [#780](https://github.com/alleslabs/celatone-frontend/pull/780) Fix proposal vote table, scroll to top on table
 - [#761](https://github.com/alleslabs/celatone-frontend/pull/761) Fix copy button tooltip alignment

src/lib/pages/pools/index.tsx

@@ -1,11 +1,11 @@
 import { Heading, Tabs, TabList, TabPanels, TabPanel } from "@chakra-ui/react";
+import { isUndefined } from "lodash";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 
 import { AmpEvent, trackUseTab, track } from "lib/amplitude";
 import { usePoolConfig } from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
-import { LoadingOverlay } from "lib/components/LoadingOverlay";
 import PageContainer from "lib/components/PageContainer";
 import { usePoolListCountQuery } from "lib/services/poolService";
 import { PoolType } from "lib/types";
@@ -55,16 +55,15 @@ export const PoolIndex = () => {
 
   useEffect(() => {
     if (
-      supportedPoolCount &&
-      unsupportedPoolCount &&
+      !isUndefined(supportedPoolCount) &&
+      !isUndefined(unsupportedPoolCount) &&
       supportedPoolCount === 0 &&
       unsupportedPoolCount > 0
     ) {
       handleTabChange(TabIndex.Unsupported);
     }
   }, [handleTabChange, supportedPoolCount, unsupportedPoolCount]);
 
-  if (isLoadingSupported || isLoadingUnsupported) return <LoadingOverlay />;
   return (
     <PageContainer>
       <Heading variant="h5" as="h5">
@@ -75,12 +74,16 @@ export const PoolIndex = () => {
           <CustomTab
             count={supportedPoolCount ?? 0}
             onClick={() => handleTabChange(TabIndex.Supported)}
+            isLoading={isLoadingSupported}
+            isDisabled={!supportedPoolCount}
           >
             Pools
           </CustomTab>
           <CustomTab
             count={unsupportedPoolCount ?? 0}
             onClick={() => handleTabChange(TabIndex.Unsupported)}
+            isLoading={isLoadingUnsupported}
+            isDisabled={!unsupportedPoolCount}
           >
             Pools with unsupported tokens
           </CustomTab>