feat: Add lazy loading for token list requests

[C0mberry]

Description

• adding lazy loading for AddressCard component

Type of change

• Bug fix

Screenshots

Testing

1. open http://localhost:3000/tx/34qZEWsTW85uZSd4N53DptMaQ5HTx2cczgwWatW6CPhLbaetEX67jELmrCyz2M2ydkQin3NR9sMbgVxeqDwT8Sqp
2. check the console

Related Issues

HOO-214

Checklist

• My code follows the project's style guidelines
• All tests pass locally and in CI
• I have run build:info script to update build information
• CI/CD checks pass
• I have included screenshots for protocol screens (if applicable)

[vercel]

@C0mberry is attempting to deploy a commit to the Solana Foundation Team on Vercel.

A member of the Team first needs to authorize it.

[greptile-apps]

Greptile Overview

Greptile Summary

This PR improves performance by batching token info requests instead of fetching them individually, and adds lazy loading via Suspense for the AccountsCard component.

Key Changes:

• Created TokenBatchProvider to batch fetch token metadata for all account addresses in a transaction
• Modified Address component to use batch context instead of individual API calls
• Wrapped AccountsCard in Suspense boundary for lazy loading
• Added getTokenInfosWithoutOnChainFallback utility for batch token fetching

Critical Issues Found:

• Violates React Rules of Hooks by conditionally calling useTokenBatch() inside a try-catch block
• Missing useMemo for accountAddresses array causes unnecessary re-renders and potential infinite loops
• The addresses dependency in TokenBatchProvider.useEffect will trigger re-fetches on every render

Confidence Score: 2/5

• This PR has critical React hook violations that will cause runtime errors
• While the batch fetching approach is sound architecturally, the implementation has serious issues: (1) conditionally calling hooks violates React's Rules of Hooks and will cause errors, (2) missing memoization will cause performance issues and potential infinite loops, (3) the dependency array issues in useEffect could trigger unnecessary re-fetches. These issues must be fixed before merging.
• Pay close attention to app/components/common/Address.tsx (Rules of Hooks violation), app/providers/token-batch-context.tsx (dependency array issues), and app/tx/[signature]/page-client.tsx (missing memoization)

Important Files Changed

Filename	Overview
app/components/common/Address.tsx	Replaced individual token fetching with batch context, but violates React Rules of Hooks with conditional hook call
app/providers/token-batch-context.tsx	New batch provider for token fetching, but has dependency issues that could cause infinite re-renders
app/tx/[signature]/page-client.tsx	Wrapped AccountsCard in TokenBatchProvider and Suspense, but accountAddresses array recreated on every render

Sequence Diagram

sequenceDiagram
    participant User
    participant PageClient as page-client.tsx
    participant TokenBatch as TokenBatchProvider
    participant TokenAPI as Token List API
    participant AccountsCard
    participant AddressComp as Address Component
    
    User->>PageClient: View transaction page
    PageClient->>PageClient: Extract accountAddresses from message
    PageClient->>TokenBatch: Initialize provider with cluster and addresses
    activate TokenBatch
    TokenBatch->>TokenBatch: useEffect triggered on mount
    TokenBatch->>TokenAPI: POST batch request for all token addresses
    TokenAPI-->>TokenBatch: Return token info array
    TokenBatch->>TokenBatch: Build tokenMap from results
    deactivate TokenBatch
    
    PageClient->>AccountsCard: Render with Suspense wrapper
    activate AccountsCard
    AccountsCard->>AddressComp: Render address with fetchTokenLabelInfo
    activate AddressComp
    AddressComp->>AddressComp: Call useTokenInfo hook
    AddressComp->>TokenBatch: Call useTokenBatch via try-catch
    TokenBatch-->>AddressComp: Return context with getTokenInfo method
    AddressComp->>TokenBatch: Call getTokenInfo with pubkey
    TokenBatch-->>AddressComp: Return cached token from tokenMap
    AddressComp->>User: Display token label
    deactivate AddressComp
    deactivate AccountsCard

Loading

[greptile-apps]

_{3 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

[rogaldh]

Another thing about batching is that it may fail in the future. With SIMD-0269 enabled, we may see transactions with larger account lists. That makes the current batch implementation unstable.
I think there are two ways to solve this:

• Use batch and cap a batch to, for example, 60 accounts
• Do not use batches and implement a better strategy to fetch indifidual address on the component level:
• • wrap the hook with react-query
• • add a cache-key to manage each data specifically
• • add IntersectionObserver to load the data only when the component is needed (to prevent spikes).

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
explorer	Ready	Preview, Comment	Feb 12, 2026 0:51am