perf(web): load the wallet and payment SDKs on demand - #14567
Merged
Conversation
|
dylanjeffers
force-pushed
the
perf/lazy-react-virtualized
branch
from
August 19, 2026 16:35
19a8e48 to
e7eb45c
Compare
ReownAppKitModal runs `new WagmiAdapter(...)`, `new SolanaAdapter()` and `createAppKit(...)` at module scope, so a single static import anywhere in the eager graph pinned @reown/*, @walletconnect/*, wagmi and @solana/web3.js into the entry chunk -- for every visitor, including everyone who never opens a wallet. @coinflowlabs/react (which bundles the nsure-ai fraud SDK) was there for the same reason. Together these were ~1.9 MB of the entry chunk. The surprising edge was auth: services/audius-sdk/auth.ts dereferenced `wagmiAdapter.wagmiConfig` at *module scope*, so every email/password user loaded the entire wallet stack to discover they did not need it. It now returns to Hedgehog before loading AppKit unless localStorage shows a persisted wallet connection. That probe deliberately errs toward loading: a false negative would silently downgrade an external-wallet user to Hedgehog, while a false positive only costs a chunk fetch. WagmiProvider stays mounted with a lightweight bootstrap config and swaps in the adapter's config once AppKit loads. Making the provider itself conditional would remount the entire app the moment a wallet appeared; swapping a context value does not. The bootstrap config sets `storage: null` so it cannot clobber the real config's persisted `wagmi.store` entry. The modals are registered lazily. This is safe because nice-modal-react's NiceModalPlaceholder filters the registry by *currently visible* ids, so a registered-but-never-shown modal never mounts and its hooks never run -- the cost was always the static import graph, not runtime. Registration moved out of each modal module on purpose: if they still self-registered, the dynamic import would overwrite MODAL_REGISTRY mid-flight and React would swap the element type under an open modal, remounting it and losing its state. The Suspense boundary is local because NiceModal.Provider mounts its placeholder outside the only boundary in routes.tsx. CoinflowPurchaseProtection in routes.tsx is now lazy too. It still renders unconditionally, so the chunk is still fetched at startup -- it is off the entry chunk's parse path rather than deferred outright. Rendering it only on purchase-capable routes would defer it properly, but that is a call for whoever owns payments, since early initialization may be deliberate. NEEDS QA: external wallet connect / disconnect / sign-in, which could not be exercised without a real wallet. The Hedgehog (email/password) path is verified. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
dylanjeffers
force-pushed
the
perf/lazy-wallet-modals
branch
from
August 19, 2026 16:52
d7eba56 to
e0cf59b
Compare
dylanjeffers
added a commit
that referenced
this pull request
Aug 19, 2026
…14568) **4 of 4** in a stack reducing the web entry chunk. Based on #14567. Includes the CI budget that locks in the whole stack. ## What `lottie-web` is a **~613 KB animation runtime**. A loading spinner is the one component that cannot be lazily loaded — it's what renders *while* things load — so `LoadingSpinner` pinned the whole runtime into the entry chunk for every visitor. The spinner is now CSS/SVG. ## The replacement isn't eyeballed Read from the Lottie source: a 32px circle with a 6px round-capped stroke whose dash grows 0→100 over 1s while rotating 410°, then shrinks back over 2s while rotating 719°. The CSS reproduces that with `stroke-dasharray`/`dashoffset` plus a rotation, and was compared against the original frozen at six phases across the cycle. It also honours `prefers-reduced-motion`, which the Lottie version did not. ##⚠️ The `svg > g > path` structure is load-bearing Roughly **ten stylesheets** recolour the spinner with `.someClass g path { stroke: … }` selectors written against the Lottie output: ``` GatedConditionsPill, Artwork, GiantTrackTile, DownloadRow, BottomButtons, DesktopSearchBar, SearchBar, LoadingSpinner, PurchaseContentFormFooter, LibraryPage ``` Emitting a `<circle>` would have silently broken spinner colours across the app. Please keep this in mind if editing the markup. ## Replacing the spinner alone gained nothing Twelve other components imported `lottie-react` directly (play bar, search bar, notification reactions, animated buttons, cover photo). They now route through one `LazyLottie` wrapper. - Type-only imports like `LottieRefCurrentProps` are preserved as `import type` so they erase at build time. - `lottieRef` is an ordinary prop rather than a React ref, so it forwards through the boundary unchanged; callers keep their existing `if (lottieRef.current)` guards. ## CI bundle budget Also points `bundlesize` at the **client** entry chunk. It previously checked only the SSR *server* chunks at 30 kB, so the bundle every user downloads had no budget at all — which is how it reached 8.3 MB unnoticed. The `builds` artifact already contained `build-production`; the job just never looked at it. Budget: **1600 kB gzip** against a current 1.49 MB, so it can only ratchet down. > The job is gated on `if: github.ref == 'refs/heads/main'`, so it reports *after* merge rather than blocking a PR. Worth revisiting separately — that's a PR-blocking policy decision. ## Known tradeoff `PlayButton` renders only the Lottie with no icon fallback, so it's briefly empty between mount and the chunk arriving (~270ms locally, longer on a slow first visit). Giving `LazyLottie` a `fallback` prop and passing static harmony icons would close that; the right per-button icon is a design call. ## Stack result | Entry chunk | raw | gzip | |---|---|---| | baseline | 8,333 KB | 2,473 KB | | after all 4 PRs | **5,618 KB** | **1,521 KB** | | | **−32.6%** | **−38.5%** | 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
3 of 4 in a stack reducing the web entry chunk. Based on #14566. This is the one that needs real review — it touches the auth path and the root provider.
What
ReownAppKitModalrunsnew WagmiAdapter(...),new SolanaAdapter()andcreateAppKit(...)at module scope, so a single static import anywhere in the eager graph pinned@reown/*,@walletconnect/*, wagmi and@solana/web3.jsinto the entry chunk — for every visitor, including everyone who never opens a wallet.@coinflowlabs/react(which bundles the nsure-ai fraud SDK) was there for the same reason.Together, ~1.9 MB of the entry chunk.
The surprising part: this was on the auth path
services/audius-sdk/auth.tsdereferencedwagmiAdapter.wagmiConfigat module scope, so every email/password user loaded the entire wallet stack to discover they didn't need it.It now returns to Hedgehog before loading AppKit unless localStorage shows a persisted wallet connection. That probe deliberately errs toward loading: a false negative would silently downgrade an external-wallet user to Hedgehog (a correctness bug), while a false positive only costs a chunk fetch.
Why WagmiProvider stays mounted
It keeps a lightweight bootstrap config and swaps in the adapter's config once AppKit loads. Making the provider itself conditional would remount the entire app the moment a wallet appeared; swapping a context value does not. The bootstrap config sets
storage: nullso it can't clobber the real config's persistedwagmi.storeentry.Why lazy modal registration is safe
nice-modal-react's
NiceModalPlaceholderfilters the registry by currently visible ids:So a registered-but-never-shown modal never mounts and its hooks never run — the cost was always the static import graph, not runtime.
Registration moved out of each modal module on purpose. If they still self-registered, the dynamic import would overwrite
MODAL_REGISTRYmid-flight and React would swap the element type under an open modal, remounting it and losing its state. The Suspense boundary is local becauseNiceModal.Providermounts its placeholder outside the only boundary inroutes.tsx.Known limitation
CoinflowPurchaseProtectioninroutes.tsxis now lazy but still renders unconditionally, so the chunk is still fetched at startup — it's off the entry chunk's parse path rather than deferred outright. Rendering it only on purchase-capable routes would defer it properly, but that's a call for whoever owns payments, since early initialization may be deliberate.External wallet connect / disconnect / sign-in could not be exercised without a real wallet. The Hedgehog (email/password) path is verified: app boots, no console errors, AppKit chunk confirmed not fetched on load, and confirmed to load on demand when a wallet modal opens.
🤖 Generated with Claude Code