Automattic / Automattic/jetpack

Load skeleton for Infinite Scroll/Older Posts feature to avoid CLS

Open
#20,611 0 comments 0 reactions 0 assignees View on GitHub
[Feature] Infinite Scroll [Pri] Low Enhancement Good For Community
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.