From f876e48aac1700a6b875e1b7dc54848f8457625d Mon Sep 17 00:00:00 2001
From: saml33 <30796577+saml33@users.noreply.github.com>
Date: Tue, 2 Jan 2024 06:38:33 +1100
Subject: [PATCH] fix flicker when loading claim or season (#353)
---
components/rewards/RewardsPage.tsx | 12 ++++++++++--
hooks/useRewards.ts | 23 +++++++++++++----------
2 files changed, 23 insertions(+), 12 deletions(-)
diff --git a/components/rewards/RewardsPage.tsx b/components/rewards/RewardsPage.tsx
index 54dcfcb4..e4138b05 100644
--- a/components/rewards/RewardsPage.tsx
+++ b/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 ? (
+
+
+
+ ) : showClaim ? (
) : (
diff --git a/hooks/useRewards.ts b/hooks/useRewards.ts
index 5331881d..93869895 100644
--- a/hooks/useRewards.ts
+++ b/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 { data: distributionDataAndClient } = useDistribution(prevSeason)
+ const [loadingClaimed, setLoadingClaimed] = useState(true)
+ 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)
- setIsAllCliamed(!toClaim || toClaim === claimed)
+ setLoadingClaimed(false)
+ 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 }
}