Carousels: Optimise updating button state

[jamesmockett]

What does this change?

• Fixes a bug where the 'next' button is sometimes not disabled when on the last image and the page has been zoomed
  • Previously the carousel had to be scrolled to the very start or end before the button state was toggled. The midpoint of the first and last cards is now used instead, which feels more natural and matches the existing behaviour of the pagination dots. (The active dot changes when the image is half in view.) This change has been applied to ScrollableCarousel and SlideshowCarousel.
• Scroll events are now throttled to optimise performance.

Why?

This ensures the button state correctly reflects the carousel's scroll position, and we're not unnecessarily processing events as the carousel is scrolled.

Screenshots

[github-actions]

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.

[github-actions]

Deploy build 39207 of Mobile::mobile-apps-rendering to CODE

All deployment options

• Deploy build 39207 of Mobile::mobile-apps-rendering to CODE
• Deploy parts of build 39207 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Size Change: +306 B (+0.03%)

Total Size: 958 kB

ℹ️ View Unchanged

Filename	Size	Change
dotcom-rendering/dist/1000.client.web.********************.js	999 B	0 B
dotcom-rendering/dist/1026.client.web.********************.js	784 B	0 B
dotcom-rendering/dist/1090.client.web.********************.js	752 B	0 B
dotcom-rendering/dist/1261.client.web.********************.js	1.89 kB	0 B
dotcom-rendering/dist/1391.client.web.********************.js	725 B	0 B
dotcom-rendering/dist/1458.client.web.********************.js	4.87 kB	0 B
dotcom-rendering/dist/1476.client.web.********************.js	784 B	0 B
dotcom-rendering/dist/1483.client.web.********************.js	3.19 kB	0 B
dotcom-rendering/dist/152.client.web.********************.js	5.3 kB	0 B
dotcom-rendering/dist/1559.client.web.********************.js	11.3 kB	+39 B (+0.35%)
dotcom-rendering/dist/1667.client.web.********************.js	918 B	0 B
dotcom-rendering/dist/169.client.web.********************.js	8.09 kB	0 B
dotcom-rendering/dist/1940.client.web.********************.js	507 B	0 B
dotcom-rendering/dist/222.client.web.********************.js	6.15 kB	0 B
dotcom-rendering/dist/2283.client.web.********************.js	3.03 kB	0 B
dotcom-rendering/dist/2310.client.web.********************.js	880 B	0 B
dotcom-rendering/dist/2368.client.web.********************.js	2.67 kB	0 B
dotcom-rendering/dist/2462.client.web.********************.js	3.87 kB	0 B
dotcom-rendering/dist/2487.client.web.********************.js	157 B	0 B
dotcom-rendering/dist/249.client.web.********************.js	3.69 kB	0 B
dotcom-rendering/dist/2611.client.web.********************.js	3.77 kB	0 B
dotcom-rendering/dist/267.client.web.********************.js	917 B	0 B
dotcom-rendering/dist/2751.client.web.********************.js	6.29 kB	0 B
dotcom-rendering/dist/2784.client.web.********************.js	3.64 kB	0 B
dotcom-rendering/dist/281.client.web.********************.js	642 B	0 B
dotcom-rendering/dist/2927.client.web.********************.js	441 B	0 B
dotcom-rendering/dist/3004.client.web.********************.js	3.29 kB	0 B
dotcom-rendering/dist/302.client.web.********************.js	4.52 kB	0 B
dotcom-rendering/dist/3060.client.web.********************.js	3.79 kB	0 B
dotcom-rendering/dist/3109.client.web.********************.js	803 B	0 B
dotcom-rendering/dist/3270.client.web.********************.js	961 B	0 B
dotcom-rendering/dist/3304.client.web.********************.js	853 B	0 B
dotcom-rendering/dist/3539.client.web.********************.js	2.17 kB	0 B
dotcom-rendering/dist/3570.client.web.********************.js	3.41 kB	0 B
dotcom-rendering/dist/3613.client.web.********************.js	3.42 kB	0 B
dotcom-rendering/dist/3634.client.web.********************.js	3.87 kB	0 B
dotcom-rendering/dist/371.client.web.********************.js	3.83 kB	0 B
dotcom-rendering/dist/3769.client.web.********************.js	999 B	0 B
dotcom-rendering/dist/3777.client.web.********************.js	3.21 kB	0 B
dotcom-rendering/dist/3833.client.web.********************.js	4.55 kB	0 B
dotcom-rendering/dist/3839.client.web.********************.js	3.71 kB	0 B
dotcom-rendering/dist/403.client.web.********************.js	3.64 kB	0 B
dotcom-rendering/dist/4120.client.web.********************.js	11.1 kB	0 B
dotcom-rendering/dist/4132.client.web.********************.js	3.51 kB	0 B
dotcom-rendering/dist/4173.client.web.********************.js	3.14 kB	0 B
dotcom-rendering/dist/4215.client.web.********************.js	10.3 kB	0 B
dotcom-rendering/dist/4282.client.web.********************.js	685 B	0 B
dotcom-rendering/dist/4364.client.web.********************.js	13 kB	0 B
dotcom-rendering/dist/4501.client.web.********************.js	4.29 kB	0 B
dotcom-rendering/dist/4553.client.web.********************.js	3.35 kB	0 B
dotcom-rendering/dist/4556.client.web.********************.js	4.15 kB	0 B
dotcom-rendering/dist/456.client.web.********************.js	2.42 kB	0 B
dotcom-rendering/dist/4628.client.web.********************.js	654 B	0 B
dotcom-rendering/dist/4941.client.web.********************.js	890 B	0 B
dotcom-rendering/dist/4985.client.web.********************.js	1.91 kB	0 B
dotcom-rendering/dist/5019.client.web.********************.js	619 B	0 B
dotcom-rendering/dist/5209.client.web.********************.js	22.7 kB	0 B
dotcom-rendering/dist/5222.client.web.********************.js	2.28 kB	0 B
dotcom-rendering/dist/5400.client.web.********************.js	4.94 kB	0 B
dotcom-rendering/dist/5410.client.web.********************.js	4.49 kB	0 B
dotcom-rendering/dist/5658.client.web.********************.js	750 B	0 B
dotcom-rendering/dist/5695.client.web.********************.js	2.59 kB	0 B
dotcom-rendering/dist/5757.client.web.********************.js	931 B	0 B
dotcom-rendering/dist/576.client.web.********************.js	11.2 kB	0 B
dotcom-rendering/dist/5880.client.web.********************.js	828 B	0 B
dotcom-rendering/dist/5920.client.web.********************.js	2.17 kB	0 B
dotcom-rendering/dist/6042.client.web.********************.js	4.04 kB	0 B
dotcom-rendering/dist/6044.client.web.********************.js	726 B	0 B
dotcom-rendering/dist/6071.client.web.********************.js	577 B	0 B
dotcom-rendering/dist/6135.client.web.********************.js	779 B	0 B
dotcom-rendering/dist/632.client.web.********************.js	6.86 kB	0 B
dotcom-rendering/dist/6389.client.web.********************.js	5.88 kB	0 B
dotcom-rendering/dist/6390.client.web.********************.js	529 B	0 B
dotcom-rendering/dist/6505.client.web.********************.js	1 kB	0 B
dotcom-rendering/dist/6587.client.web.********************.js	4.41 kB	0 B
dotcom-rendering/dist/6598.client.web.********************.js	780 B	0 B
dotcom-rendering/dist/6638.client.web.********************.js	907 B	0 B
dotcom-rendering/dist/6655.client.web.********************.js	3.64 kB	0 B
dotcom-rendering/dist/6662.client.web.********************.js	523 B	0 B
dotcom-rendering/dist/678.client.web.********************.js	804 B	0 B
dotcom-rendering/dist/6976.client.web.********************.js	2.87 kB	0 B
dotcom-rendering/dist/6988.client.web.********************.js	4.27 kB	0 B
dotcom-rendering/dist/6990.client.web.********************.js	3.41 kB	0 B
dotcom-rendering/dist/7045.client.web.********************.js	5.13 kB	0 B
dotcom-rendering/dist/7047.client.web.********************.js	44.3 kB	0 B
dotcom-rendering/dist/7116.client.web.********************.js	23 kB	0 B
dotcom-rendering/dist/7366.client.web.********************.js	1.91 kB	0 B
dotcom-rendering/dist/7392.client.web.********************.js	3.21 kB	0 B
dotcom-rendering/dist/7691.client.web.********************.js	853 B	0 B
dotcom-rendering/dist/7729.client.web.********************.js	20.3 kB	0 B
dotcom-rendering/dist/7807.client.web.********************.js	3.21 kB	0 B
dotcom-rendering/dist/7824.client.web.********************.js	2.86 kB	0 B
dotcom-rendering/dist/7955.client.web.********************.js	5.03 kB	0 B
dotcom-rendering/dist/8122.client.web.********************.js	6 kB	0 B
dotcom-rendering/dist/83.client.web.********************.js	750 B	0 B
dotcom-rendering/dist/8347.client.web.********************.js	4.37 kB	0 B
dotcom-rendering/dist/8504.client.web.********************.js	827 B	0 B
dotcom-rendering/dist/8536.client.web.********************.js	595 B	0 B
dotcom-rendering/dist/8586.client.web.********************.js	2 kB	0 B
dotcom-rendering/dist/8590.client.web.********************.js	4.01 kB	0 B
dotcom-rendering/dist/8626.client.web.********************.js	890 B	0 B
dotcom-rendering/dist/8637.client.web.********************.js	3.92 kB	0 B
dotcom-rendering/dist/8697.client.web.********************.js	956 B	0 B
dotcom-rendering/dist/8833.client.web.********************.js	829 B	0 B
dotcom-rendering/dist/9184.client.web.********************.js	493 B	0 B
dotcom-rendering/dist/9203.client.web.********************.js	3.06 kB	0 B
dotcom-rendering/dist/9395.client.web.********************.js	4.41 kB	0 B
dotcom-rendering/dist/9460.client.web.********************.js	7.27 kB	0 B
dotcom-rendering/dist/9493.client.web.********************.js	785 B	0 B
dotcom-rendering/dist/9557.client.web.********************.js	921 B	0 B
dotcom-rendering/dist/9721.client.web.********************.js	717 B	0 B
dotcom-rendering/dist/9835.client.web.********************.js	647 B	0 B
dotcom-rendering/dist/9899.client.web.********************.js	669 B	0 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js	6.39 kB	0 B
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js	2.85 kB	0 B
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js	3.71 kB	0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js	422 B	0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js	3.57 kB	0 B
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js	3.17 kB	0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js	3.46 kB	0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js	2.52 kB	0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js	3.08 kB	0 B
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js	6.32 kB	0 B
dotcom-rendering/dist/AuEoy2024Wrapper-importable.client.web.********************.js	5.04 kB	0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js	2.3 kB	0 B
dotcom-rendering/dist/Branding-importable.client.web.********************.js	2.54 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.96 kB	0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js	6.72 kB	0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js	8.22 kB	0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js	2.95 kB	0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js	6.73 kB	0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js	4.53 kB	0 B
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js	541 B	0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js	2.8 kB	0 B
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js	1.91 kB	0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js	1.22 kB	0 B
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js	1.74 kB	0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js	3.14 kB	0 B
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js	1.72 kB	0 B
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js	5.98 kB	0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js	3.74 kB	0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js	2.02 kB	0 B
dotcom-rendering/dist/ExpandableMarketingCardWrapper-importable.client.web.********************.js	4.38 kB	0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js	1.94 kB	0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js	967 B	0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js	619 B	0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js	3.44 kB	0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js	345 B	0 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js	3.71 kB	0 B
dotcom-rendering/dist/frameworks.client.web.********************.js	20.9 kB	0 B
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js	7.63 kB	0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js	3.81 kB	0 B
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js	10.7 kB	0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js	7.41 kB	0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js	2.22 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 kB	0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js	782 B	0 B
dotcom-rendering/dist/index.client.web.********************.js	46.2 kB	-1 B (0%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js	2.79 kB	0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js	853 B	0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js	6.56 kB	0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js	4.25 kB	0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js	4.86 kB	0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js	3.62 kB	0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js	4.56 kB	0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js	435 B	0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js	6.52 kB	0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js	3.82 kB	0 B
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js	5.27 kB	0 B
dotcom-rendering/dist/Liveness-importable.client.web.********************.js	4.82 kB	0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js	9.89 kB	0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js	4.97 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.83 kB	0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js	6.07 kB	0 B
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js	5.22 kB	0 B
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js	5.33 kB	0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js	3.77 kB	0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js	545 B	0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js	805 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	469 B	0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js	1.96 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.39 kB	0 B
dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js	7.26 kB	+71 B (+0.99%)
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js	5.17 kB	0 B
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js	3.82 kB	+77 B (+2.06%)
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js	3.82 kB	+78 B (+2.09%)
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js	6.98 kB	0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js	2.19 kB	0 B
dotcom-rendering/dist/sentry.client.web.********************.js	794 B	0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js	3.86 kB	0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js	485 B	0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js	3.94 kB	0 B
dotcom-rendering/dist/shimport.client.web.********************.js	2.8 kB	0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js	728 B	0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js	1.82 kB	0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js	4.51 kB	0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js	5.6 kB	0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js	3.16 kB	0 B
dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js	4.23 kB	+42 B (+1%)
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js	3.61 kB	0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js	4.8 kB	0 B
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js	4.23 kB	0 B
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js	7.68 kB	0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js	2.9 kB	0 B
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js	3.17 kB	0 B
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js	1.23 kB	0 B
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js	12.8 kB	0 B
dotcom-rendering/dist/TopBar-importable.client.web.********************.js	8.24 kB	0 B
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js	2.73 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.8 kB	0 B
dotcom-rendering/dist/UsEoy2024Wrapper-importable.client.web.********************.js	5.48 kB	0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js	4.98 kB	0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js	2.65 kB	0 B
dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js	6.55 kB	0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js	6.3 kB	0 B

_{compressed-size-action}

[github-actions]

Deploy build 15027 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 15027 of dotcom:rendering-all to CODE
• Deploy parts of build 15027 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[cemms1]

Nice work! We might want to add a helper function in lib for the throttle function in the future if we have a third usage of it ⚡

[jamesmockett]

Nice work! We might want to add a helper function in lib for the throttle function in the future if we have a third usage of it ⚡

Yeah, I wasn't sure whether to add it as a helper function in this PR, although it might need some config to make it more generic. Now that I think about it, ScrollableHighlights would benefit from this as well, but maybe that can be looked at separately as this PR fixes the immediate issue with slideshows that Daniel encountered.

[prout-bot]

Seen on PROD (merged by @jamesmockett 9 minutes and 56 seconds ago) Please check your changes!