Better loading container for Most Viewed component at end of articles #13123
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: -111 B (-0.01%) Total Size: 871 kB
ℹ️ View Unchanged
|
domlander
force-pushed
the
doml/placeholder
branch
from
bea1d7b to
c5bf211
Compare
github-actions
bot
removed
the
run_chromatic
domlander
force-pushed
the
doml/placeholder
branch
from
c5bf211 to
71fec64
Compare
github-actions
bot
removed
the
run_chromatic
|
Hello 👋! When you're ready to run Chromatic, please apply the You will need to reapply the label each time you want to run Chromatic. |
domlander
changed the title
marjisound
approved these changes
Jan 15, 2025
domlander
force-pushed
the
doml/placeholder
branch
from
71fec64 to
31c82b8
Compare
github-actions
bot
removed
the
run_chromatic
|
Seen on PROD (merged by @domlander 8 minutes and 45 seconds ago) Please check your changes! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #13050
What does this change?
Introduces a new loading container for the Most Viewed component that appears at the end of article pages.
Adds a Chromatic story for this component at three breakpoints.
Why?
Better 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, when this loading container may be displayed for several seconds. This is especially true in this case as the two onwards content carousels above this component can also have this loading placeholder.
Reduced CLS. The height of the current placeholder is set to 360px for this component, regardless of screen size. The component when loaded does not have a fixed height (it depends on the text in the links), but there is a strong correlation between the screen size and component height. For example, the component is a lot taller on mobile than on tablet, as the content is divided into two columns from the tablet breakpoint. If the height of the loading component more closely matches the height of the component when loaded, CLS will be reduced.
Screenshots
Screen.Recording.2025-01-13.at.14.43.59.mov
Data
I took the height of the Most Viewed component (excluding section header) for rendered content, the old placeholder and the new placeholder, at each of our breakpoints. Note that the rendered content does not have a fixed height, i.e. it is not always 762px tall on MobileMedium, but it was at 10:30am 14/01/2025. This shows that CLS will be reduced at all breakpoints.