feat: may have fixed the tab issue

src/app/address/[principal]/TokenBalanceCard/NftAvatar.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import React from 'react';
-
 import { useNftMetadata } from '../../../../common/queries/useNftMetadata';
 import { TokenAvatar } from './TokenAvatar';
 
@@ -15,9 +13,7 @@ interface NftAvatarProps {
 export function NftAvatar({ token, contractId, firstNftValue, asset }: NftAvatarProps) {
   const { data: tokenMetadata } = useNftMetadata(
     { contractId, tokenId: Number(firstNftValue) },
-    // { enabled: !!firstNftValue, retry: 1, retryDelay: 2000 }
-    { enabled: !!firstNftValue }
-
+    { enabled: !!firstNftValue, retry: 1, retryDelay: 2000 }
   );
   return <TokenAvatar metadataImageUrl={tokenMetadata?.metadata?.cached_image} asset={asset} />;
 }

src/app/address/[principal]/TokenBalanceCard/index.tsx

@@ -65,7 +65,7 @@ export function TokenBalanceCard(props: TokenBalanceCardProps) {
   return (
     <ExplorerErrorBoundary
       Wrapper={Section}
-      wrapperProps={{ title: 'Holdings', mb: '32px' }}
+      wrapperProps={{ title: 'Holdings', mb: 8 }}
       tryAgainButton
     >
       <TokenBalanceCardBase {...props} />

src/app/address/[principal]/TokenBalanceCard/useImageUrl.ts

@@ -1,19 +1,24 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
 
 export function useImageUrl(metadataImageUrl?: string) {
-  const [contentType, setContentType] = useState<string | null>('image');
-  useEffect(() => {
-    if (!metadataImageUrl) return;
-    void fetch(metadataImageUrl)
-      .then(response => {
-        setContentType(response.headers.get('content-type'));
-      })
-      .catch(() => {
-        // corrupted image
-        setContentType(null);
-      });
-  }, [metadataImageUrl]);
-  return { url: metadataImageUrl, contentType };
+  const { data: contentType } = useQuery({
+    queryKey: ['image-content-type', metadataImageUrl],
+    queryFn: async () => {
+      try {
+        if (!metadataImageUrl) return 'image';
+        const response = await fetch(metadataImageUrl);
+        return response.headers.get('content-type');
+      } catch (error) {
+        return null;
+      }
+    },
+    enabled: !!metadataImageUrl,
+    retry: false,
+    staleTime: Infinity,
+    refetchOnWindowFocus: false,
+  });
+
+  return { url: metadataImageUrl, contentType: contentType ?? 'image' };
 }

src/features/txs-list/AddressMempoolTxsList.tsx

@@ -5,15 +5,15 @@ import { MempoolTransaction } from '@stacks/stacks-blockchain-api-types';
 
 import { ListFooter } from '../../common/components/ListFooter';
 import { SkeletonGenericTransactionList } from '../../common/components/loaders/skeleton-transaction';
-import { useSuspenseInfiniteQueryResult } from '../../common/hooks/useInfiniteQueryResult';
-import { useSuspenseAddressMempoolTxsInfinite } from '../../common/queries/useAddressMempoolTxsInfinite';
+import { useInfiniteQueryResult } from '../../common/hooks/useInfiniteQueryResult';
+import { useAddressMempoolTxsInfinite } from '../../common/queries/useAddressMempoolTxsInfinite';
 import { FilteredTxs } from './FilteredTxs';
 import { MempoolTxListItem } from './ListItem/MempoolTxListItem';
 
 export const AddressMempoolTxsList: FC<{ address: string }> = memo(({ address }) => {
-  const response = useSuspenseAddressMempoolTxsInfinite(address);
+  const response = useAddressMempoolTxsInfinite(address);
 
-  const txs = useSuspenseInfiniteQueryResult<MempoolTransaction>(response);
+  const txs = useInfiniteQueryResult<MempoolTransaction>(response);
 
   if (response.isLoading) {
     return <SkeletonGenericTransactionList />;