Football tables - only hydrate the competition select #13701

andrewHEguardian · 2025-03-28T14:26:03Z

What does this change?

This PR moves the island hydrating the league/competition selector dropdown from around the entire page to just the select itself

Why?

Ship less unnecessary JS

Screenshots

After

* create skeleton for list of tables * create tables list component * create table page component * add wrapper and baseUrl * construct table url from competition url

Co-authored-by: Jamie B <[email protected]>

…om-rendering into ahe/football-table

github-actions · 2025-03-28T14:26:14Z

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 · 2025-03-28T14:26:26Z

Deploy build 41808 of `Mobile::mobile-apps-rendering` to CODE

All deployment options

From guardian/actions-riff-raff.

github-actions · 2025-03-28T14:30:21Z

Deploy build 17614 of `dotcom:rendering-all` to CODE

All deployment options

From guardian/actions-riff-raff.

github-actions · 2025-03-28T14:30:56Z

Size Change: -2.91 kB (-0.32%)

Total Size: 922 kB

Filename	Size	Change
`dotcom-rendering/dist/3356.client.web.********************.js`	0 B	-3.04 kB (removed)	🏆
`dotcom-rendering/dist/FootballMatchesPageWrapper-importable.client.web.********************.js`	6.8 kB	-787 B (-10.37%)	👏
`dotcom-rendering/dist/FootballTablesPageWrapper-importable.client.web.********************.js`	0 B	-5.73 kB (removed)	🏆
`dotcom-rendering/dist/5378.client.web.********************.js`	3.38 kB	+3.38 kB (new file)	🆕
`dotcom-rendering/dist/FootballTablesCompetitionSelect-importable.client.web.********************.js`	3.25 kB	+3.25 kB (new file)	🆕

ℹ️ View Unchanged

Filename	Size	Change
`dotcom-rendering/dist/1254.client.web.********************.js`	3.69 kB	0 B
`dotcom-rendering/dist/1262.client.web.********************.js`	4.49 kB	0 B
`dotcom-rendering/dist/1401.client.web.********************.js`	441 B	0 B
`dotcom-rendering/dist/1477.client.web.********************.js`	3.03 kB	0 B
`dotcom-rendering/dist/1543.client.web.********************.js`	2.51 kB	0 B
`dotcom-rendering/dist/1714.client.web.********************.js`	2.87 kB	0 B
`dotcom-rendering/dist/204.client.web.********************.js`	3.55 kB	0 B
`dotcom-rendering/dist/2185.client.web.********************.js`	3.1 kB	0 B
`dotcom-rendering/dist/2188.client.web.********************.js`	6.23 kB	0 B
`dotcom-rendering/dist/2482.client.web.********************.js`	44.8 kB	0 B
`dotcom-rendering/dist/2505.client.web.********************.js`	2.86 kB	0 B
`dotcom-rendering/dist/2671.client.web.********************.js`	2.9 kB	0 B
`dotcom-rendering/dist/280.client.web.********************.js`	531 B	0 B
`dotcom-rendering/dist/2949.client.web.********************.js`	4.15 kB	0 B
`dotcom-rendering/dist/3051.client.web.********************.js`	2.11 kB	0 B
`dotcom-rendering/dist/3186.client.web.********************.js`	4.49 kB	0 B
`dotcom-rendering/dist/3389.client.web.********************.js`	2.84 kB	0 B
`dotcom-rendering/dist/342.client.web.********************.js`	4.17 kB	0 B
`dotcom-rendering/dist/3474.client.web.********************.js`	4.45 kB	0 B
`dotcom-rendering/dist/3769.client.web.********************.js`	22.7 kB	0 B
`dotcom-rendering/dist/39.client.web.********************.js`	3.07 kB	0 B
`dotcom-rendering/dist/3937.client.web.********************.js`	4.6 kB	0 B
`dotcom-rendering/dist/4170.client.web.********************.js`	18.4 kB	0 B
`dotcom-rendering/dist/4337.client.web.********************.js`	15.1 kB	0 B
`dotcom-rendering/dist/4501.client.web.********************.js`	4.29 kB	0 B
`dotcom-rendering/dist/4700.client.web.********************.js`	3.85 kB	0 B
`dotcom-rendering/dist/4731.client.web.********************.js`	3.76 kB	0 B
`dotcom-rendering/dist/475.client.web.********************.js`	2.62 kB	0 B
`dotcom-rendering/dist/4793.client.web.********************.js`	5.03 kB	0 B
`dotcom-rendering/dist/5598.client.web.********************.js`	2.87 kB	0 B
`dotcom-rendering/dist/5708.client.web.********************.js`	16.5 kB	0 B
`dotcom-rendering/dist/5866.client.web.********************.js`	4.8 kB	0 B
`dotcom-rendering/dist/6010.client.web.********************.js`	5.41 kB	0 B
`dotcom-rendering/dist/6021.client.web.********************.js`	11.5 kB	0 B
`dotcom-rendering/dist/6061.client.web.********************.js`	3.63 kB	0 B
`dotcom-rendering/dist/6110.client.web.********************.js`	3.54 kB	0 B
`dotcom-rendering/dist/6627.client.web.********************.js`	10.4 kB	0 B
`dotcom-rendering/dist/677.client.web.********************.js`	3.39 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/7094.client.web.********************.js`	156 B	0 B
`dotcom-rendering/dist/7116.client.web.********************.js`	23 kB	0 B
`dotcom-rendering/dist/7350.client.web.********************.js`	3.31 kB	0 B
`dotcom-rendering/dist/7540.client.web.********************.js`	2.73 kB	0 B
`dotcom-rendering/dist/7544.client.web.********************.js`	4.77 kB	0 B
`dotcom-rendering/dist/7546.client.web.********************.js`	7.76 kB	0 B
`dotcom-rendering/dist/7553.client.web.********************.js`	4.34 kB	0 B
`dotcom-rendering/dist/7670.client.web.********************.js`	3.17 kB	0 B
`dotcom-rendering/dist/7730.client.web.********************.js`	3.64 kB	0 B
`dotcom-rendering/dist/7765.client.web.********************.js`	17.9 kB	0 B
`dotcom-rendering/dist/7797.client.web.********************.js`	3.75 kB	0 B
`dotcom-rendering/dist/7798.client.web.********************.js`	3.31 kB	0 B
`dotcom-rendering/dist/7861.client.web.********************.js`	617 B	0 B
`dotcom-rendering/dist/7975.client.web.********************.js`	4.49 kB	0 B
`dotcom-rendering/dist/8030.client.web.********************.js`	4.31 kB	0 B
`dotcom-rendering/dist/8039.client.web.********************.js`	7.89 kB	0 B
`dotcom-rendering/dist/8115.client.web.********************.js`	3.65 kB	0 B
`dotcom-rendering/dist/8129.client.web.********************.js`	4.77 kB	0 B
`dotcom-rendering/dist/8918.client.web.********************.js`	20.4 kB	0 B
`dotcom-rendering/dist/9242.client.web.********************.js`	3.76 kB	0 B
`dotcom-rendering/dist/9294.client.web.********************.js`	3.27 kB	0 B
`dotcom-rendering/dist/943.client.web.********************.js`	3.08 kB	0 B
`dotcom-rendering/dist/9558.client.web.********************.js`	3.53 kB	0 B
`dotcom-rendering/dist/9665.client.web.********************.js`	4.14 kB	0 B
`dotcom-rendering/dist/9718.client.web.********************.js`	2.68 kB	0 B
`dotcom-rendering/dist/9734.client.web.********************.js`	3.63 kB	0 B
`dotcom-rendering/dist/Accessibility-importable.client.web.********************.js`	8.42 kB	0 B
`dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js`	2.99 kB	0 B
`dotcom-rendering/dist/AdPortals-importable.client.web.********************.js`	4.76 kB	0 B
`dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js`	423 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.58 kB	0 B
`dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js`	2.76 kB	0 B
`dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js`	6.61 kB	0 B
`dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js`	4.6 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.68 kB	0 B
`dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js`	6.75 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.67 kB	0 B
`dotcom-rendering/dist/Carousel-importable.client.web.********************.js`	6.67 kB	0 B
`dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js`	4.55 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`	2.73 kB	0 B
`dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js`	1.07 kB	0 B
`dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js`	2.4 kB	0 B
`dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js`	3.45 kB	0 B
`dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js`	2.82 kB	0 B
`dotcom-rendering/dist/Dropdown-importable.client.web.********************.js`	954 B	0 B
`dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js`	4.43 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.71 kB	0 B
`dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js`	618 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.43 kB	0 B
`dotcom-rendering/dist/frameworks.client.web.********************.js`	20.9 kB	0 B
`dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js`	7.47 kB	0 B
`dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js`	6.28 kB	0 B
`dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js`	11.5 kB	0 B
`dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js`	8 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`	46.4 kB	+11 B (+0.02%)
`dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js`	2.9 kB	0 B
`dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js`	852 B	0 B
`dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js`	8.73 kB	0 B
`dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js`	3.77 kB	0 B
`dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js`	5.71 kB	0 B
`dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js`	3.2 kB	0 B
`dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js`	6.41 kB	0 B
`dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js`	434 B	0 B
`dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js`	6.54 kB	0 B
`dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js`	3.59 kB	0 B
`dotcom-rendering/dist/LiveblogGutterAskWrapper-importable.client.web.********************.js`	2.51 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.68 kB	0 B
`dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js`	6.04 kB	0 B
`dotcom-rendering/dist/Metrics-importable.client.web.********************.js`	2.69 kB	0 B
`dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js`	4.01 kB	0 B
`dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js`	6.11 kB	0 B
`dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js`	5.26 kB	0 B
`dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js`	5.39 kB	0 B
`dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js`	3.36 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`	750 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.69 kB	0 B
`dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js`	2.55 kB	0 B
`dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js`	6.12 kB	0 B
`dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js`	6.33 kB	0 B
`dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js`	5.83 kB	0 B
`dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js`	2.1 kB	0 B
`dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js`	2.07 kB	0 B
`dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js`	4.23 kB	0 B
`dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js`	2.22 kB	0 B
`dotcom-rendering/dist/sentry.client.web.********************.js`	805 B	0 B
`dotcom-rendering/dist/SetABTests-importable.client.web.********************.js`	3.92 kB	0 B
`dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js`	486 B	0 B
`dotcom-rendering/dist/ShareButton-importable.client.web.********************.js`	2.17 kB	0 B
`dotcom-rendering/dist/shimport.client.web.********************.js`	2.8 kB	0 B
`dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js`	894 B	0 B
`dotcom-rendering/dist/ShowMore-importable.client.web.********************.js`	916 B	0 B
`dotcom-rendering/dist/SignInGateMain.client.web.********************.js`	4.38 kB	0 B
`dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js`	5.48 kB	0 B
`dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js`	8.54 kB	0 B
`dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js`	4.51 kB	0 B
`dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js`	4.77 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.02 kB	0 B
`dotcom-rendering/dist/SubNav-importable.client.web.********************.js`	2.43 kB	0 B
`dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js`	3.51 kB	0 B
`dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js`	1.23 kB	0 B
`dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js`	14.7 kB	0 B
`dotcom-rendering/dist/TopBar-importable.client.web.********************.js`	8.1 kB	0 B
`dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js`	2.51 kB	0 B
`dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js`	1.14 kB	0 B
`dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js`	2.91 kB	0 B
`dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js`	6.05 kB	0 B
`dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js`	3.3 kB	0 B
`dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js`	843 B	0 B

_{compressed-size-action}

SiAdcock

No page is an island 🏝️

prout-bot · 2025-03-31T09:35:47Z

Seen on PROD (merged by @andrewHEguardian 10 minutes ago) Please check your changes!

andrewHEguardian and others added 28 commits March 17, 2025 12:22

Create football table component

9fb2a69

add divider to table

4aa03c7

add full table link footer

4a7074b

add crest

72e5fb0

hide less important columns until tablet width

8497a90

add table caption

748924c

add sub text color to table first column

e6950a8

Add the form to the football table (#13638)

2ac9434

add chromatic params to table

eb281e7

title for Form

24817a0

Create Football table list components (#13643)

7ae67cf

* create skeleton for list of tables * create tables list component * create table page component * add wrapper and baseUrl * construct table url from competition url

hoist single football table story

12e81eb

Co-authored-by: Jamie B <[email protected]>

hoist football form story

b8c1a74

Co-authored-by: Jamie B <[email protected]>

hoist and fix all table stories

e8c462f

use just one media query to display:none

211f7cd

Co-authored-by: Jamie B <[email protected]>

review fixes

b75823c

use source colour for football loss

a0762c7

Co-authored-by: Jamie B <[email protected]>

remove table caption, always show h3 in competition section

55c9f82

Merge branch 'ahe/football-table' of https://github.com/guardian/dotc…

a02ecf9

…om-rendering into ahe/football-table

make team name a th and add row scope

0362862

change colspan at breakpoint with fewer columns

5fcd691

prettier fix

32682c5

remove slicing 5 results for form - will be responsibility of parser

bcc9bea

wip: add group names

e3d27f4

correctly place group and competition names

eee0dd6

fix type

295f18e

move island around just the select instead of the whole page

dfd49c0

Merge branch 'main' into football-table-island

c803f9a

andrewHEguardian requested a review from a team as a code owner March 28, 2025 14:26

github-actions bot added the dotcom-rendering label Mar 28, 2025

andrewHEguardian requested a review from JamieB-gu March 28, 2025 14:30

SiAdcock approved these changes Mar 31, 2025

View reviewed changes

andrewHEguardian added the run_chromatic Runs chromatic when label is applied label Mar 31, 2025

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Mar 31, 2025

andrewHEguardian merged commit 5c1d2a5 into main Mar 31, 2025
32 checks passed

andrewHEguardian deleted the football-table-island branch March 31, 2025 09:25

prout-bot added Pending-on-PROD Seen-on-PROD and removed Pending-on-PROD labels Mar 31, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Football tables - only hydrate the competition select #13701

Football tables - only hydrate the competition select #13701

andrewHEguardian commented Mar 28, 2025 •

edited

Loading

github-actions bot commented Mar 28, 2025

github-actions bot commented Mar 28, 2025

github-actions bot commented Mar 28, 2025

github-actions bot commented Mar 28, 2025

SiAdcock left a comment

prout-bot commented Mar 31, 2025

Football tables - only hydrate the competition select #13701

Football tables - only hydrate the competition select #13701

Conversation

andrewHEguardian commented Mar 28, 2025 • edited Loading

What does this change?

Why?

Screenshots

github-actions bot commented Mar 28, 2025

github-actions bot commented Mar 28, 2025

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

github-actions bot commented Mar 28, 2025

Deploy build 17614 of dotcom:rendering-all to CODE

github-actions bot commented Mar 28, 2025

SiAdcock left a comment

Choose a reason for hiding this comment

prout-bot commented Mar 31, 2025

andrewHEguardian commented Mar 28, 2025 •

edited

Loading

Deploy build 41808 of `Mobile::mobile-apps-rendering` to CODE

Deploy build 17614 of `dotcom:rendering-all` to CODE