improve loading refresh state

gallery-so · Oct 19, 2023 · a7526ae · a7526ae
1 parent 0ca23fa
commit a7526ae
Showing 1 changed file with 12 additions and 5 deletions.
diff --git a/apps/mobile/src/screens/NftSelectorScreen/NftSelectorContractScreen.tsx b/apps/mobile/src/screens/NftSelectorScreen/NftSelectorContractScreen.tsx
@@ -1,6 +1,6 @@
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 import { FlashList, ListRenderItem } from '@shopify/flash-list';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { View } from 'react-native';
 import { graphql, useLazyLoadQuery, useRefetchableFragment } from 'react-relay';
 
@@ -83,9 +83,16 @@ export function NftSelectorContractScreen() {
     await syncCreatedTokensForExistingContract(contractId);
   }, [syncCreatedTokensForExistingContract, contractId]);
 
-  const handleRefresh = useCallback(() => {
-    refetch({}, { fetchPolicy: 'network-only' });
-  }, [refetch]);
+  const [isRefetching, setIsRefetching] = useState(false);
+
+  const handleRefresh = useCallback(async () => {
+    setIsRefetching(true);
+    try {
+      await refetch({}, { fetchPolicy: 'network-only' });
+    } finally {
+      setIsRefetching(false);
+    }
+  }, [refetch, setIsRefetching]);
 
   const rows = useMemo(() => {
     const rows = [];
@@ -146,7 +153,7 @@ export function NftSelectorContractScreen() {
           {isCreator ? (
             <View>
               <AnimatedRefreshIcon
-                isSyncing={isSyncing}
+                isSyncing={isSyncing || isRefetching}
                 onSync={handleSyncTokensForContract}
                 onRefresh={handleRefresh}
                 eventElementId="NftSelectorSyncCreatedTokensForExistingContractButton"