Automattic / Automattic/jetpack
Load skeleton for Infinite Scroll/Older Posts feature to avoid CLS
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
#### Is your feature request related to a problem? Please describe.
Currently, the Jetpack Infinite scroll/Load more feature loads new content without any skeletons in place, causing the footer or any other visible element on the screen to jump further down causing CLS (Cumulative Layout Shift) issue. Happens mostly on low-resource servers that takes time to fetch posts.
#### Describe the solution you'd like
It would be great to load a light skeleton for the upcoming posts to be within the 500ms CLS mark after the button click (for click action) or as the user approaches the bottom (for autoload). This way, the CLS scores wouldn't be affected.
#### Describe alternatives you've considered
Maybe immediately adding an equivalent space instead of a skeleton (with backgrounds or placeholders) would also help, if it is hard to implement.
#### Additional context
Contributor guide
Research direction
Start by locating the Jetpack Infinite Scroll/Load more implementation and its click and autoload entry points. Compare loading with the footer or other visible elements on a low-resource server; done means a light skeleton or equivalent reserved space appears within the requested 500ms window without visible layout shift.
Written by the indexing model from the issue text.
Assessment
- Domain
- frontend, performance
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100