perf(web): replace the Lottie spinner with CSS and defer lottie-web - #14568
Open
dylanjeffers wants to merge 1 commit into
Open
perf(web): replace the Lottie spinner with CSS and defer lottie-web#14568dylanjeffers wants to merge 1 commit into
dylanjeffers wants to merge 1 commit into
Conversation
lottie-web is a ~613 KB animation runtime. A loading spinner is the one
component that cannot be lazily loaded -- it is 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 is not eyeballed: the Lottie source
is a 32px circle with a 6px round-capped stroke whose dash grows 0 -> 100 over
1s while rotating 410deg, then shrinks back over 2s while rotating 719deg. 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 deliberate and load-bearing: roughly ten
stylesheets recolour the spinner with `.someClass g path { stroke: ... }`
selectors written against the Lottie output. Emitting a <circle> would have
silently broken spinner colours across the app.
Replacing the spinner alone would have 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 such as 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.
Also points the CI bundlesize check 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 set at 1600 kB gzip against a current 1.49 MB so it can only ratchet
down. Note the job is gated on `github.ref == 'refs/heads/main'`, so it reports
after merge rather than blocking a PR -- worth revisiting separately.
KNOWN TRADEOFF: PlayButton renders only the Lottie with no icon fallback, so it
is 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.
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.
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-webis a ~613 KB animation runtime. A loading spinner is the one component that cannot be lazily loaded — it's what renders while things load — soLoadingSpinnerpinned 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/dashoffsetplus a rotation, and was compared against the original frozen at six phases across the cycle. It also honoursprefers-reduced-motion, which the Lottie version did not.svg > g > pathstructure is load-bearingRoughly ten stylesheets recolour the spinner with
.someClass g path { stroke: … }selectors written against the Lottie output: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-reactdirectly (play bar, search bar, notification reactions, animated buttons, cover photo). They now route through oneLazyLottiewrapper.LottieRefCurrentPropsare preserved asimport typeso they erase at build time.lottieRefis an ordinary prop rather than a React ref, so it forwards through the boundary unchanged; callers keep their existingif (lottieRef.current)guards.CI bundle budget
Also points
bundlesizeat 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. Thebuildsartifact already containedbuild-production; the job just never looked at it.Budget: 1600 kB gzip against a current 1.49 MB, so it can only ratchet down.
Known tradeoff
PlayButtonrenders 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). GivingLazyLottieafallbackprop and passing static harmony icons would close that; the right per-button icon is a design call.Stack result
🤖 Generated with Claude Code