Fix overview banners loading (#667)

* Fix overview banners loading Fix broken caching and spinners
zeriontech · Nov 17, 2024 · 5551d7a · 5551d7a
1 parent fc367a6
commit 5551d7a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 18 deletions.
diff --git a/src/ui/pages/Overview/Overview.tsx b/src/ui/pages/Overview/Overview.tsx
@@ -364,6 +364,27 @@ function ReadonlyMode() {
   );
 }
 
+function XpBannerComponent({ address }: { address: string }) {
+  const { data: walletsMeta } = useWalletsMetaByChunks({
+    addresses: [address],
+    suspense: false,
+  });
+
+  const walletMeta = walletsMeta?.[0];
+  const claimXpBannerVisible =
+    FEATURE_LOYALTY_FLOW === 'on' && Boolean(walletMeta?.membership.retro);
+
+  if (claimXpBannerVisible) {
+    return (
+      <div style={{ paddingInline: 16 }}>
+        <XpDropClaimBanner />
+      </div>
+    );
+  } else {
+    return null;
+  }
+}
+
 function OverviewComponent() {
   useBodyStyle(
     useMemo(() => ({ ['--background' as string]: 'var(--z-index-0)' }), [])
@@ -416,21 +437,10 @@ function OverviewComponent() {
     suspense: false,
   });
 
-  const { data: walletsMeta } = useWalletsMetaByChunks({
-    addresses: [params.address],
-    enabled: !isReadonlyGroup,
-  });
-
   const { data: loyaltyEnabled } = useRemoteConfigValue(
     'extension_loyalty_enabled'
   );
 
-  const walletMeta = walletsMeta?.[0];
-  const claimXpBannerVisible =
-    FEATURE_LOYALTY_FLOW === 'on' &&
-    loyaltyEnabled &&
-    walletMeta?.membership.retro;
-
   // Update backend record with 'platform: extension'
   useEffect(() => {
     if (singleAddressNormalized) {
@@ -746,19 +756,16 @@ function OverviewComponent() {
                     dappChain={dappChain || null}
                     renderGuard={() => testnetGuardView}
                   >
-                    <>
-                      {claimXpBannerVisible ? (
-                        <div style={{ paddingInline: 16 }}>
-                          <XpDropClaimBanner />
-                          <Spacer height={20} />
-                        </div>
+                    <VStack gap={20}>
+                      {!isReadonlyGroup && loyaltyEnabled ? (
+                        <XpBannerComponent address={params.address} />
                       ) : null}
                       <Positions
                         dappChain={dappChain || null}
                         filterChain={filterChain}
                         onChainChange={setFilterChain}
                       />
-                    </>
+                    </VStack>
                   </TestnetworkGuard>
                 </ViewSuspense>
               }

diff --git a/src/ui/shared/requests/useWalletsMetaByChunks.ts b/src/ui/shared/requests/useWalletsMetaByChunks.ts
@@ -4,13 +4,16 @@ import { ZerionAPI } from 'src/modules/zerion-api/zerion-api.client';
 export function useWalletsMetaByChunks({
   addresses,
   enabled = true,
+  suspense = true,
 }: {
   addresses: string[];
   enabled?: boolean;
+  suspense?: boolean;
 }) {
   return useQuery({
     enabled: enabled && addresses.length > 0,
     queryKey: ['ZerionAPI.getWalletsMetaByChunks', addresses],
     queryFn: () => ZerionAPI.getWalletsMetaByChunks(addresses),
+    suspense,
   });
 }