refactor: nav to server component; add loading states#15642
Conversation
feat: add nav menu loading skeletons
Unwraps unrelated components from SearchProvider allowing them to load immediately; removes those skeletons from loader; intl: extracts aria labels
wackerow
requested review from
corwintines,
minimalsm and
pettinarip
as code owners
✅ Deploy Preview for ethereumorg ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
github-actions
Bot
added
content 🖋️
opacity-5 dark:opacty-60, using animate-pulse-light (animates to/from 20% opacity)
use default ui/skeleton opacity
pettinarip
left a comment
pettinarip
left a comment
There was a problem hiding this comment.
@wackerow great job! looks fantastic 👍🏼
@nloureiro @konopkja would like to get the designers' input on the loading skeletons for the menu objects and see if we are all aligned. Dropping a short video demoing what it looks like on slow connections.
record-06-16-2025-14.06.54.mp4
| )} | ||
|
|
||
| {desktopScreen && ( | ||
| <LanguagePicker> |
There was a problem hiding this comment.
We would need to lazy load the lang picker and the search button as well since it will be not interactive in slow connections while loading.
Basically we need to lazy load all the nav components (except the logo link) IMO since they all need js for execution.
There was a problem hiding this comment.
Yeah good call... this displays it quicker, but it's not interactive immediately which hurts us. Will patch
There was a problem hiding this comment.
From trying this out though, we're already lazy loading the SearchProvider component though, which loads an interactive search component when ready.
The theme toggle as well, seems to be interactive immediately, so I think we're good there.
The LanguagePicker though will be visible without interactivity when it first loads, so I'll lazy load that as well.
avoid prop drilling locale
add new keyframe animations for slow-pulse and fade-in
pettinarip
left a comment
pettinarip
left a comment
There was a problem hiding this comment.
@wackerow great job, merging.
There are still two buttons above the fold that should be also covered: the color mode toggle and the morpher button. Both should be delayed.
| </SearchProvider> | ||
|
|
||
| {desktopScreen && ( | ||
| <Button |
There was a problem hiding this comment.
I think we also need to display a skeleton for this button. Currently, the button is no responsive when clicked in pre-load time, affecting INP and FID. We can tackle this is a separate PR.
|
lol, @corwintines we were in sync with this PR haha |
3 participants
Description
dynamic, withloadingplaceholder componentsSearchProvider(renamed fromSearch) to only component that require it.