audacity/audacity.github.io
1
0
Fork 0
mirror of https://github.com/audacity/audacity.github.io.git synced 2026-04-13 15:35:01 -05:00
Code Issues 9 Packages Projects Releases Wiki Activity

stop page from jumping during load #11

New Issue
Closed
opened 2025-09-09 19:41:42 -05:00 by Octech6711 · 1 comment
Octech6711 commented 2025-09-09 19:41:42 -05:00
Owner
Copy Link

Originally created by @LWinterberg on GitHub.

our react components (in particular releasevideo.jsx and shareyoursounds.jsx) currently determine their size after the initial render, causing pages to shift. pagespeed.web.dev doesn't like that and fails us for the core web vitals which allegedly is an SEO factor.

https://web.dev/articles/cls

We possibly can fix this by using useLayoutEffect in the elements in question so the size is there before any painting happens. In practice, I've only been able to make the stuff inside the thing load together with the element, not the other way round.
https://react.dev/reference/react/useLayoutEffect

Originally created by @LWinterberg on GitHub. our react components (in particular releasevideo.jsx and shareyoursounds.jsx) currently determine their size after the initial render, causing pages to shift. pagespeed.web.dev doesn't like that and fails us for the core web vitals which allegedly is an SEO factor. https://web.dev/articles/cls We possibly can fix this by using useLayoutEffect in the elements in question so the size is there before any painting happens. In practice, I've only been able to make the stuff inside the thing load together with the element, not the other way round. https://react.dev/reference/react/useLayoutEffect
Octech6711 commented 2025-09-09 19:41:42 -05:00
Author
Owner
Copy Link

@LWinterberg commented on GitHub:

on further inspection, it seems like changing client:only to client:load fixes the thing from jumping about. @DilsonsPickles any reason we need client:only rendering? from the looks of it, the download button points to the /download before the JS loads in, which is fine in my eyes

@LWinterberg commented on GitHub: on further inspection, it seems like changing `client:only` to `client:load` fixes the thing from jumping about. @DilsonsPickles any reason we need client:only rendering? from the looks of it, the download button points to the /download before the JS loads in, which is fine in my eyes
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
pull-request
Mirrored from GitHub Pull Request
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
Octech6711
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: audacity/audacity.github.io#11
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?