Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Investigate Island Placeholders #13049

Open
domlander opened this issue Dec 24, 2024 · 0 comments
Open

Investigate Island Placeholders #13049

domlander opened this issue Dec 24, 2024 · 0 comments
Assignees

Comments

@domlander
Copy link
Contributor

domlander commented Dec 24, 2024

When we load content on the client, we often use a loading container to indicate to the user that content is loading. When the content is loaded, we replace the loading container with the content.

For example, the Most Viewed component (at the bottom of article pages):

Loading Content
mobile mobile-loading mobile-content
desktop desktop-loading desktop-content

Problems:

  • CLS. Notice how the height of the container when content is loading is much smaller that the height of the container when the content is displayed. This will negatively impact our CLS scores. The height of the placeholder is currently the same for both mobile and desktop in many cases.
  • UX. A large loading container does not indicate to the user anything about the content that is loading. This could lead the user to thinking the page is "broken" when on weaker network connections. This is especially true on mobile, where the loading container can take up

Solution:

  • We should create skeleton containers for content. This will allow us to more accurately predict the height of the content, to differentiate between the mobile and desktop experiences, and to provide the user with visual clues to what kind of content is loading.
@domlander domlander self-assigned this Dec 24, 2024
@domlander domlander converted this from a draft issue Dec 24, 2024
@domlander domlander moved this from In Progress to Backlog in WebX Team Dec 24, 2024
@domlander domlander moved this from Backlog to Triage in WebX Team Dec 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Triage
Development

No branches or pull requests

1 participant