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

Don't load Most Viewed placeholder when page is adapted #13186

Merged
merged 1 commit into from
Jan 24, 2025

Conversation

domlander
Copy link
Contributor

@domlander domlander commented Jan 22, 2025

Why?

When the page is adapted, match the behaviour before the new Most Viewed placeholder was added.

Screenshots

http://localhost:3030/Article/https://www.theguardian.com/football/2024/oct/06/brighton-tottenham-premier-league-match-report#adapt

Before After
before after

Follow up

A good follow-up would be to remove the containers that do not render content when the site is adapted. However, this is a bit more tricky - Do we want the page removing large containers after page load for users on a poor connection - what would that experience be like? Would the CLS be worth it?

@domlander domlander added the run_chromatic Runs chromatic when label is applied label Jan 22, 2025
Copy link

Size Change: +17 B (0%)

Total Size: 884 kB

ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1076.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/1101.client.web.********************.js 4.81 kB 0 B
dotcom-rendering/dist/1262.client.web.********************.js 4.48 kB 0 B
dotcom-rendering/dist/1401.client.web.********************.js 441 B 0 B
dotcom-rendering/dist/1427.client.web.********************.js 4.94 kB 0 B
dotcom-rendering/dist/1477.client.web.********************.js 3.52 kB 0 B
dotcom-rendering/dist/1669.client.web.********************.js 12.3 kB 0 B
dotcom-rendering/dist/1714.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/2188.client.web.********************.js 6.52 kB 0 B
dotcom-rendering/dist/2444.client.web.********************.js 2.67 kB 0 B
dotcom-rendering/dist/2482.client.web.********************.js 44.8 kB 0 B
dotcom-rendering/dist/280.client.web.********************.js 531 B 0 B
dotcom-rendering/dist/3213.client.web.********************.js 5.42 kB 0 B
dotcom-rendering/dist/342.client.web.********************.js 4.18 kB 0 B
dotcom-rendering/dist/3524.client.web.********************.js 3.51 kB 0 B
dotcom-rendering/dist/3769.client.web.********************.js 22.7 kB 0 B
dotcom-rendering/dist/3789.client.web.********************.js 3.58 kB 0 B
dotcom-rendering/dist/39.client.web.********************.js 3.05 kB 0 B
dotcom-rendering/dist/3937.client.web.********************.js 3.85 kB 0 B
dotcom-rendering/dist/4170.client.web.********************.js 16.3 kB 0 B
dotcom-rendering/dist/4285.client.web.********************.js 6.54 kB 0 B
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB 0 B
dotcom-rendering/dist/4684.client.web.********************.js 3.17 kB 0 B
dotcom-rendering/dist/4878.client.web.********************.js 8.08 kB 0 B
dotcom-rendering/dist/4943.client.web.********************.js 3.69 kB 0 B
dotcom-rendering/dist/4982.client.web.********************.js 13.9 kB 0 B
dotcom-rendering/dist/5095.client.web.********************.js 4.17 kB 0 B
dotcom-rendering/dist/5223.client.web.********************.js 3.27 kB 0 B
dotcom-rendering/dist/5598.client.web.********************.js 4.49 kB 0 B
dotcom-rendering/dist/6021.client.web.********************.js 11.1 kB 0 B
dotcom-rendering/dist/6061.client.web.********************.js 3.63 kB 0 B
dotcom-rendering/dist/6073.client.web.********************.js 3.53 kB 0 B
dotcom-rendering/dist/6163.client.web.********************.js 3.83 kB 0 B
dotcom-rendering/dist/6577.client.web.********************.js 5.41 kB 0 B
dotcom-rendering/dist/6627.client.web.********************.js 10.4 kB 0 B
dotcom-rendering/dist/6876.client.web.********************.js 2.67 kB 0 B
dotcom-rendering/dist/6882.client.web.********************.js 12.7 kB 0 B
dotcom-rendering/dist/6903.client.web.********************.js 3.21 kB 0 B
dotcom-rendering/dist/6931.client.web.********************.js 2.63 kB 0 B
dotcom-rendering/dist/6940.client.web.********************.js 526 B 0 B
dotcom-rendering/dist/7116.client.web.********************.js 23 kB 0 B
dotcom-rendering/dist/719.client.web.********************.js 3.49 kB 0 B
dotcom-rendering/dist/7350.client.web.********************.js 3.32 kB 0 B
dotcom-rendering/dist/7364.client.web.********************.js 3.22 kB 0 B
dotcom-rendering/dist/7540.client.web.********************.js 2.72 kB 0 B
dotcom-rendering/dist/7546.client.web.********************.js 7.36 kB 0 B
dotcom-rendering/dist/7861.client.web.********************.js 619 B 0 B
dotcom-rendering/dist/8030.client.web.********************.js 4.18 kB 0 B
dotcom-rendering/dist/8067.client.web.********************.js 3.39 kB 0 B
dotcom-rendering/dist/8209.client.web.********************.js 3.64 kB 0 B
dotcom-rendering/dist/8592.client.web.********************.js 157 B 0 B
dotcom-rendering/dist/895.client.web.********************.js 5.14 kB 0 B
dotcom-rendering/dist/9072.client.web.********************.js 2.61 kB 0 B
dotcom-rendering/dist/9242.client.web.********************.js 3.76 kB 0 B
dotcom-rendering/dist/9288.client.web.********************.js 2.51 kB 0 B
dotcom-rendering/dist/9362.client.web.********************.js 20.3 kB 0 B
dotcom-rendering/dist/9558.client.web.********************.js 3.53 kB 0 B
dotcom-rendering/dist/9665.client.web.********************.js 4.04 kB 0 B
dotcom-rendering/dist/9735.client.web.********************.js 4.46 kB 0 B
dotcom-rendering/dist/9766.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/9790.client.web.********************.js 3.58 kB 0 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 6.95 kB 0 B
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.85 kB 0 B
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 4.85 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 424 B 0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.63 kB 0 B
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 2.7 kB 0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 2.66 kB 0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.55 kB 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 2.6 kB 0 B
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js 6.33 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 2 kB 0 B
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.88 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 37.2 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.97 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.74 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 5.77 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.66 kB 0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 7.03 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 5.14 kB 0 B
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 538 B 0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.29 kB 0 B
dotcom-rendering/dist/CrosswordComponent-importable.client.web.********************.js 284 B 0 B
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.93 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 2.44 kB 0 B
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 1.74 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 2.82 kB 0 B
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.72 kB 0 B
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 3.5 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.94 kB 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.02 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.94 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 3.8 kB 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 617 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 2.52 kB 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 343 B 0 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.5 kB 0 B
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB 0 B
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.37 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 6.26 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 11.4 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 7.97 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.58 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 15.8 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 10.2 kB 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 783 B 0 B
dotcom-rendering/dist/index.client.web.********************.js 45.1 kB 0 B
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.9 kB 0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 8.55 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 3.74 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 5.68 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.55 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 6.38 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 436 B 0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.53 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.55 kB 0 B
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 4.81 kB 0 B
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.72 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 7.6 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 5.96 kB 0 B
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.69 kB 0 B
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 3.85 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 5.95 kB +17 B (+0.29%)
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.12 kB 0 B
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.32 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.72 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 543 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 802 B 0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 749 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 543 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 468 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.75 kB 0 B
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.53 kB 0 B
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.11 kB 0 B
dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js 6.85 kB 0 B
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 6.12 kB 0 B
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 4.15 kB 0 B
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 4.13 kB 0 B
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.1 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.22 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 794 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.8 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 485 B 0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 919 B 0 B
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 698 B 0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 2.1 kB 0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 4.46 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5.56 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 5.83 kB 0 B
dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js 4.37 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 4.84 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 5.78 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 6.15 kB 0 B
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js 8.14 kB 0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.41 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 3.48 kB 0 B
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB 0 B
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 13.5 kB 0 B
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 9.29 kB 0 B
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.5 kB 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.13 kB 0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 2.91 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 5.97 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 2.78 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 4.38 kB 0 B

compressed-size-action

@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Jan 22, 2025
@domlander domlander marked this pull request as ready for review January 22, 2025 16:52
@domlander domlander requested a review from a team as a code owner January 22, 2025 16:52
Copy link

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

Copy link
Contributor

@marjisound marjisound left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good 👍

@domlander domlander merged commit 289cb84 into main Jan 24, 2025
33 checks passed
@domlander domlander deleted the doml/most-viewed-adapt branch January 24, 2025 09:24
@prout-bot
Copy link

Seen on PROD (merged by @domlander 8 minutes and 50 seconds ago) Please check your changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants