You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
desktop
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.
The text was updated successfully, but these errors were encountered:
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):
Problems:
Solution:
The text was updated successfully, but these errors were encountered: