diff --git a/src/pages/gd/Claim/OldClaim.tsx b/src/pages/gd/Claim/OldClaim.tsx index 2c3ee2948..2a52f005d 100644 --- a/src/pages/gd/Claim/OldClaim.tsx +++ b/src/pages/gd/Claim/OldClaim.tsx @@ -11,7 +11,7 @@ import { useScreenSize, ClaimSuccessModal, } from '@gooddollar/good-design' -import { Box, Center, Text, useBreakpointValue } from 'native-base' +import { Box, Center, Spinner, Text, useBreakpointValue } from 'native-base' import { useConnectionInfo } from 'hooks/useConnectionInfo' import { useClaim, @@ -52,6 +52,7 @@ const OldClaim = memo(() => { }) const [claimed, setClaimed] = useState(undefined) + const [isClaimLoading, setIsClaimLoading] = useState(true) const { address, chainId } = useConnectionInfo() const { open } = useAppKit() const network = SupportedV2Networks[chainId] @@ -103,15 +104,18 @@ const OldClaim = memo(() => { if (claimAmount?.isZero()) { setClaimed(true) + setIsClaimLoading(false) setRefreshRate(12) resetState() return } else if (state.status === 'Success') { setClaimed(true) + setIsClaimLoading(false) return } setClaimed(false) + setIsClaimLoading(false) setRefreshRate('everyBlock') } if (claimAmount) hasClaimed().catch(noop) @@ -121,6 +125,7 @@ const OldClaim = memo(() => { // upon switching chain we want temporarily to poll everyBlock up untill we have the latest data useEffect(() => { setClaimed(undefined) + setIsClaimLoading(true) setRefreshRate('everyBlock') }, [/* used */ chainId]) @@ -407,16 +412,22 @@ const OldClaim = memo(() => { )} - + {isClaimLoading ? ( +
+ +
+ ) : ( + + )} {isHoliday ? (