fix(claim): show loading spinner while claim data loads on network switch (#614)

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, Button, Center, Spinner, Text, useBreakpointValue } from 'native-base'
 import { useConnectionInfo } from 'hooks/useConnectionInfo'
 import {
     useClaim,
@@ -42,11 +42,13 @@ import { useIsSimpleApp } from 'state/simpleapp/simpleapp'
 import { useDisabledClaimingModal } from './useDisabledClaimModal'
 import { useGoodDappFeatures } from 'hooks/useFeaturesEnabled'
 
+const INITIAL_PERIOD_EPOCH_MS = 86_400_000
+
 const OldClaim = memo(() => {
     const { i18n } = useLingui()
     const [refreshRate, setRefreshRate] = useState<QueryParams['refresh']>(12)
     const claimDetails = useClaim(refreshRate)
-    const { claimAmount } = claimDetails
+    const { claimAmount, isWhitelisted, nextClaimTime } = claimDetails
     const isMinipay = isMiniPay()
     const { resetState, state, send } = useContractFunctionWithDefaultGasFees(
         claimDetails.contract,
@@ -58,6 +60,8 @@ const OldClaim = memo(() => {
     )
 
     const [claimed, setClaimed] = useState<boolean | undefined>(undefined)
+    const [dataChainId, setDataChainId] = useState<number | undefined>(undefined)
+    const [claimLoadError, setClaimLoadError] = useState<boolean>(false)
     const { address, chainId } = useConnectionInfo()
     const { open } = useAppKit()
     const network = SupportedV2Networks[chainId]
@@ -107,24 +111,40 @@ const OldClaim = memo(() => {
 
             if (claimAmount?.isZero()) {
                 setClaimed(true)
+                setDataChainId(chainId)
                 setRefreshRate(12)
                 resetState()
                 return
             } else if (state.status === 'Success') {
                 setClaimed(true)
+                setDataChainId(chainId)
+                setRefreshRate(12)
                 return
             }
 
             setClaimed(false)
-            setRefreshRate('everyBlock')
+            setDataChainId(chainId)
+            setRefreshRate(12)
+        }
+        if (claimAmount && (!nextClaimTime || nextClaimTime.getTime() > INITIAL_PERIOD_EPOCH_MS)) {
+            hasClaimed().catch(noop)
         }
-        if (claimAmount) hasClaimed().catch(noop)
         // eslint-disable-next-line react-hooks-addons/no-unused-deps, react-hooks/exhaustive-deps
-    }, [claimAmount, chainId, refreshRate])
+    }, [claimAmount, chainId, nextClaimTime, resetState, state.status])
+
+    useEffect(() => {
+        if (!isWhitelisted && nextClaimTime && nextClaimTime.getTime() > INITIAL_PERIOD_EPOCH_MS) {
+            setDataChainId(chainId)
+            setClaimed(false)
+            setRefreshRate(12)
+        }
+    }, [isWhitelisted, nextClaimTime, chainId])
 
-    // upon switching chain we want temporarily to poll everyBlock up untill we have the latest data
+    // upon switching chain we want temporarily to poll everyBlock up until we have the latest data
     useEffect(() => {
+        setDataChainId(undefined)
         setClaimed(undefined)
+        setClaimLoadError(false)
         setRefreshRate('everyBlock')
     }, [/* used */ chainId])
 
@@ -152,7 +172,41 @@ const OldClaim = memo(() => {
         [sendData, network]
     )
 
+    const isClaimDataLoading = Boolean(
+        address &&
+            (activeChainFeatures['claimEnabled'] || !isProd || isMinipay) &&
+            !claimLoadError &&
+            (dataChainId !== chainId ||
+                !nextClaimTime ||
+                nextClaimTime.getTime() <= INITIAL_PERIOD_EPOCH_MS ||
+                (isWhitelisted && (claimAmount === undefined || claimed === undefined)))
+    )
+
+    useEffect(() => {
+        if (!isClaimDataLoading) {
+            return
+        }
+
+        const timeoutId = setTimeout(() => {
+            setClaimLoadError(true)
+            setRefreshRate(12)
+        }, 15000)
+
+        return () => clearTimeout(timeoutId)
+    }, [isClaimDataLoading])
+
+    const handleRetry = useCallback(() => {
+        setClaimLoadError(false)
+        setDataChainId(undefined)
+        setClaimed(undefined)
+        setRefreshRate('everyBlock')
+    }, [])
+
     const handleClaim = useCallback(async () => {
+        if (isClaimDataLoading) {
+            return false
+        }
+
         setRefreshRate('everyBlock')
 
         if (!claimEnabled) {
@@ -186,7 +240,16 @@ const OldClaim = memo(() => {
 
         return false
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [send, network, sendData, activeChainFeatures, isSimpleApp, claimEnabled, showModal])
+    }, [
+        isClaimDataLoading,
+        send,
+        network,
+        sendData,
+        activeChainFeatures,
+        isSimpleApp,
+        claimEnabled,
+        showModal,
+    ])
 
     const handleConnect = useCallback(async () => {
         if (!address) {
@@ -353,7 +416,30 @@ const OldClaim = memo(() => {
                         <Box style={balanceContainer} position="relative" borderRadius="2xl" overflow="hidden">
                             <Dialog />
 
-                            {claimed ? (
+                            {claimLoadError ? (
+                                <Center w="full" py="10">
+                                    <Text
+                                        fontFamily="subheading"
+                                        color="goodGrey.500"
+                                        fontSize="sm"
+                                        mb="4"
+                                        textAlign="center"
+                                    >
+                                        {i18n._(t`Unable to load claim data. Please check your connection and try again.`)}
+                                    </Text>
+                                    <Button
+                                        variant="outline"
+                                        borderRadius="xl"
+                                        onPress={handleRetry}
+                                    >
+                                        {i18n._(t`Retry`)}
+                                    </Button>
+                                </Center>
+                            ) : isClaimDataLoading ? (
+                                <Center w="full" py="12">
+                                    <Spinner variant="page-loader" size="lg" />
+                                </Center>
+                            ) : claimed ? (
                                 <Box justifyContent="center" display="flex" alignItems="center" textAlign="center">
                                     <ClaimBalance refresh={refreshRate} />
                                     <ClaimSuccessModal open={state?.status === 'Success'} />