Skip to content

perf: lazy-load layer-2 networks table#18007

Merged
wackerow merged 3 commits into
devfrom
seo/h1-layer-2-networks
Apr 21, 2026
Merged

perf: lazy-load layer-2 networks table#18007
wackerow merged 3 commits into
devfrom
seo/h1-layer-2-networks

Conversation

@pettinarip
Copy link
Copy Markdown
Member

@pettinarip pettinarip commented Apr 21, 2026

Summary

  • Lazy-load Layer2NetworksTable on /layer-2/networks using the project's established lazy.tsx + loading.tsx convention (same pattern as FindWalletProductTable)
  • Drops the SSR + hydration cost of the interactive table; hero, callouts, and NetworkMaturity remain server-rendered so SEO is unaffected
  • As a side effect, fixes a hydration mismatch inside ProductTableMediaQuery on first paint (server renders without the desktop filter column, client was trying to mount it)
  • Removes the passthrough _components/networks.tsx wrapper and the now-pointless <Suspense> around the client tree
  • Adds an explicit ExtendedRollup cast on mainnetData at the page boundary — the old untyped wrapper had been masking that ethereumNetworkData doesn't fully satisfy the type (runtime behavior unchanged)

Test plan

  • Visit /layer-2/networks on desktop — no hydration error in console, skeleton flashes briefly before the table mounts
  • Visit on mobile width — mobile filter toggle + row list render correctly
  • Expand a network row, open mobile filters, apply a filter — behavior matches dev
  • pnpm build passes, route First Load JS for /layer-2/networks drops vs dev

Preview link

https://deploy-preview-18007.ethereum.it/layer-2/networks

@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 21, 2026

Deploy Preview for ethereumorg ready!

Name Link
🔨 Latest commit dc1c95e
🔍 Latest deploy log https://app.netlify.com/projects/ethereumorg/deploys/69e7f466dad5c20008729309
😎 Deploy Preview https://deploy-preview-18007.ethereum.it
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
7 paths audited
Performance: 61 (🟢 up 3 from production)
Accessibility: 93 (no change from production)
Best Practices: 100 (no change from production)
SEO: 98 (🔴 down 1 from production)
PWA: 59 (no change from production)
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions github-actions Bot added the tooling 🔧 Changes related to tooling of the project label Apr 21, 2026
}).format(row.original.txCosts || 0)}
</>
) : (
<p>-</p>
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this was causing a hydration issue (p inside a p)

<MainArticle className="relative flex flex-col">
<ContentHero {...heroProps} />

<Layer2NetworksTable
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

move all into the server-page level component, except form Layer2NetworksTable that is lazy loaded. This way we can have the h1 and content server rendered

@wackerow wackerow merged commit 9a7fff5 into dev Apr 21, 2026
9 checks passed
@wackerow wackerow deleted the seo/h1-layer-2-networks branch April 21, 2026 22:35
@wackerow wackerow mentioned this pull request Apr 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

tooling 🔧 Changes related to tooling of the project

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants