fix(performance): lazy loading, dns-prefetch, and chunk splitting

[gabitoesmiapodo]

Summary

• Add loading="lazy" to <img> in TokenLogo and Avatar
• Add dns-prefetch hints for common blockchain RPC endpoints
• Add manualChunks to split react, wagmi/viem, tanstack, chakra, and web3 into separate cached chunks

Test plan

• pnpm test passes
• pnpm build succeeds with separate vendor chunks visible in output

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
components.dappbooster	Ready	Preview, Comment	Mar 24, 2026 0:05am
demo.dappbooster	Ready	Preview	Mar 24, 2026 0:05am
docs.dappbooster	Ready	Preview, Comment	Mar 24, 2026 0:05am

[Copilot]

Pull request overview

This PR focuses on front-end performance optimizations by reducing initial image/network work and improving long-term caching via more stable vendor chunking in the Vite build.

Changes:

• Add loading="lazy" to TokenLogo and Avatar <img> elements.
• Add dns-prefetch hints for several blockchain RPC domains in index.html.
• Configure Rollup manualChunks to split major dependency groups into separate vendor chunks.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
vite.config.ts	Adds build.rollupOptions.output.manualChunks to create stable vendor chunks for key dependency groups.
src/components/sharedComponents/TokenLogo.tsx	Adds lazy-loading to token logo images to reduce upfront image fetches.
src/components/sharedComponents/Avatar.tsx	Adds lazy-loading to ENS avatar images to reduce upfront image fetches.
index.html	Adds dns-prefetch resource hints for RPC endpoints to reduce DNS latency.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

manualChunks groups react and react-dom, but the app imports react-dom/client (see src/main.tsx). Rollup treats subpath imports as separate module IDs, so react-dom/client can end up in a separate chunk, undermining the goal of a single cached React vendor bundle. Consider adding react-dom/client (and optionally other React subpaths you import) to vendor-react.

Suggested change

	'vendor-react': ['react', 'react-dom'],
	'vendor-react': ['react', 'react-dom', 'react-dom/client'],

[gabitoesmiapodo]

Fixed: react-dom/client added to the vendor-react chunk in the previous round of feedback.

[Copilot]

These dns-prefetch hints are hard-coded to specific public RPC hosts, but the app’s actual RPC endpoints are configured via PUBLIC_RPC_* env vars (see src/lib/networks.config.ts). As-is, this may prefetch domains that aren’t used (unnecessary DNS leakage + wasted work) and may miss the domains that are used in a given deployment. Suggest either removing these hints or generating them from the configured RPC URLs during build/deploy (so they always match the active RPC hosts).

Suggested change

	<!-- DNS prefetch for blockchain RPC endpoints -->
	<link rel="dns-prefetch" href="https://eth.llamarpc.com" />
	<link rel="dns-prefetch" href="https://cloudflare-eth.com" />
	<link rel="dns-prefetch" href="https://gateway.tenderly.co" />

[gabitoesmiapodo]

Not removing. The fallback RPCs (llamarpc, cloudflare, etc.) are the wagmi default public providers — for any deployment that doesn't configure custom RPCs they are the actual endpoints used. The hints are best-effort and cause no harm when a custom RPC is configured.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.