fix flicker when loading claim or season (#353)

components/rewards/RewardsPage.tsx

@@ -5,6 +5,7 @@ import { useWallet } from '@solana/wallet-adapter-react'
 import { useCurrentSeason, useIsAllClaimed } from 'hooks/useRewards'
 import Season from './Season'
 import ClaimPage from './Claim'
+import Loading from '@components/shared/Loading'
 
 export const tiers = ['seed', 'mango', 'whale', 'bot']
 
@@ -15,10 +16,17 @@ const RewardsPage = () => {
   const { data: seasonData } = useCurrentSeason()
   const currentSeason = seasonData ? seasonData.season_id : undefined
   const prevSeason = currentSeason ? currentSeason - 1 : undefined
-  const { showClaim } = useIsAllClaimed(prevSeason, publicKey)
+  const { showClaim, loading: loadingShowClaim } = useIsAllClaimed(
+    prevSeason,
+    publicKey,
+  )
 
   return !showLeaderboards ? (
-    showClaim ? (
+    loadingShowClaim ? (
+      <div className="flex min-h-[calc(100vh-92px)] items-center justify-center">
+        <Loading />
+      </div>
+    ) : showClaim ? (
       <ClaimPage />
     ) : (
       <Season setShowLeaderboards={setShowLeaderboards} />

hooks/useRewards.ts

@@ -81,10 +81,13 @@ export const useIsAllClaimed = (
   prevSeason: number | undefined,
   walletPk: PublicKey | null,
 ) => {
-  const [isAllClaimed, setIsAllCliamed] = useState(true)
+  const [isAllClaimed, setIsAllCliamed] = useState(false)
   const [showClaim, setShowClaim] = useState(true)
-  const [loading, setLoading] = useState(true)
+  const [loadingClaimed, setLoadingClaimed] = useState(true)
-  const { data: distributionDataAndClient } = useDistribution(prevSeason)
+  const {
+    data: distributionDataAndClient,
+    isInitialLoading: loadingDistribution,
+  } = useDistribution(prevSeason)
   const distributionData = distributionDataAndClient?.distribution
 
   useEffect(() => {
@@ -95,21 +98,18 @@ export const useIsAllClaimed = (
           const claimed = (
             await distributionData?.getClaimed(walletPk)
           )?.filter((x) => !x.equals(PublicKey.default))?.length
-          setLoading(false)
+          setLoadingClaimed(false)
-          setIsAllCliamed(!toClaim || toClaim === claimed)
+          setIsAllCliamed(!!toClaim && toClaim === claimed)
         } catch (e) {
           console.log('failed to check claimed rewards', e)
-          setLoading(false)
         }
-      } else {
-        setIsAllCliamed(false)
       }
     }
     handleGetIsAllClaimed()
   }, [distributionData, walletPk])
 
   useEffect(() => {
-    if (distributionData && walletPk) {
+    if (distributionData && walletPk && !loadingClaimed) {
       const start = distributionData.start.getTime()
       const currentTimestamp = new Date().getTime()
       const isClaimActive =
@@ -121,6 +121,9 @@ export const useIsAllClaimed = (
     } else {
       setShowClaim(false)
     }
-  }, [distributionData, walletPk, isAllClaimed])
+  }, [distributionData, walletPk, isAllClaimed, loadingClaimed])
+
+  const loading = loadingClaimed || loadingDistribution
+
   return { isAllClaimed, showClaim, loading }
 }