add boundary web + fix issue with refetch mobile

gallery-so · Apr 22, 2024 · 0294919 · 0294919
1 parent 939bda8
commit 0294919
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 16 deletions.
diff --git a/apps/mobile/src/contexts/TokenStateManagerContext.tsx b/apps/mobile/src/contexts/TokenStateManagerContext.tsx
@@ -127,15 +127,14 @@ export function TokenStateManagerProvider({ children }: PropsWithChildren) {
   const environment = useRelayEnvironment();
   const FragmentResource = getFragmentResourceForEnvironment(environment);
   const incrementTokenRetryKey = useCallback(
-    (tokenId: string) => {
+    (tokenIdentifiers: string | string[]) => {
       addBreadcrumb({
         message: 'Trying to clear the Relay FragmentResource cache',
         level: 'info',
       });
 
-      // Wrapping this in a try catch since we have no idea
-      // if Relay wil introduce a breaking change here.
-      // This was copy-pasted from the web `NftErrorContext.tsx`
+      const tokenIdsArray = Array.isArray(tokenIdentifiers) ? tokenIdentifiers : [tokenIdentifiers];
+
       try {
         FragmentResource._cache._map.clear();
       } catch (e) {
@@ -146,13 +145,16 @@ export function TokenStateManagerProvider({ children }: PropsWithChildren) {
 
       setTokens((previous) => {
         const next = { ...previous };
-        const token = { ...(next[tokenId] ?? defaultTokenState()) };
-        token.isFailed = false;
-        token.isLoading = false;
-        token.isPolling = false;
-        token.refreshingMetadata = false;
-        token.retryKey++;
-        next[tokenId] = token;
+        tokenIdsArray.forEach((tokenId) => {
+          const token = { ...(next[tokenId] ?? defaultTokenState()) };
+          token.isFailed = false;
+          token.isLoading = false;
+          token.isPolling = false;
+          token.refreshingMetadata = false;
+          token.retryKey++;
+          next[tokenId] = token;
+        });
+
         return next;
       });
     },
@@ -217,9 +219,7 @@ export function TokenStateManagerProvider({ children }: PropsWithChildren) {
     TokenStateManagerContextType['clearTokenFailureState']
   >(
     (tokenIds: string[]) => {
-      for (const tokenId of tokenIds) {
-        incrementTokenRetryKey(tokenId);
-      }
+      incrementTokenRetryKey(tokenIds);
     },
     [incrementTokenRetryKey]
   );

diff --git a/apps/web/src/components/NftSelector/NftSelector.tsx b/apps/web/src/components/NftSelector/NftSelector.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo } from 'react';
+import { Suspense, useCallback, useEffect, useMemo } from 'react';
 import { graphql, useLazyLoadQuery } from 'react-relay';
 import { useSyncCreatedTokensForExistingContract } from 'src/hooks/api/tokens/useSyncCreatedTokensForExistingContract';
 import styled from 'styled-components';
@@ -25,6 +25,7 @@ import { NftSelectorCollectionGroup } from './groupNftSelectorCollectionsByAddre
 import { NftSelectorFilterNetwork } from './NftSelectorFilter/NftSelectorFilterNetwork';
 import { NftSelectorFilterSort } from './NftSelectorFilter/NftSelectorFilterSort';
 import { NftSelectorViewSelector } from './NftSelectorFilter/NftSelectorViewSelector';
+import { NftSelectorLoadingView } from './NftSelectorLoadingView';
 import { NftSelectorSearchBar } from './NftSelectorSearchBar';
 import NftSelectorTokens from './NftSelectorTokens';
 
@@ -38,7 +39,11 @@ type Props = {
 export type NftSelectorContractType = Omit<NftSelectorCollectionGroup, 'tokens'> | null;
 
 export function NftSelector(props: Props) {
-  return <NftSelectorInner {...props} />;
+  return (
+    <Suspense fallback={<NftSelectorLoadingView />}>
+      <NftSelectorInner {...props} />
+    </Suspense>
+  );
 }
 
 function NftSelectorInner({ onSelectToken, headerText, preSelectedContract, eventFlow }: Props) {