Football tables - only hydrate the competition select (#13701)

* move island around just the select instead of the whole page

Author: andrewHEguardian

dotcom-rendering/src/components/FootballTablesCompetitionSelect.importable.tsx

@@ -0,0 +1,27 @@
+import type { Region } from '../footballMatches';
+import { FootballCompetitionSelect } from './FootballCompetitionSelect';
+
+const goToCompetitionSpecificPage =
+	(guardianBaseUrl: string) => (path: string) => {
+		const url = `${guardianBaseUrl}${path}`;
+		window.location.assign(url);
+	};
+
+type Props = {
+	regions: Region[];
+	pageId: string;
+	guardianBaseUrl: string;
+};
+
+export const FootballTablesCompetitionSelect = ({
+	regions,
+	pageId,
+	guardianBaseUrl,
+}: Props) => (
+	<FootballCompetitionSelect
+		regions={regions}
+		pageId={pageId}
+		onChange={goToCompetitionSpecificPage(guardianBaseUrl)}
+		kind="Tables"
+	/>
+);

dotcom-rendering/src/components/FootballTablesPage.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react/*';
-import { fn } from '@storybook/test';
 import { regions } from '../../fixtures/manual/footballData';
 import { FootballTableList as TableListDefault } from './FootballTableList.stories';
 import { FootballTablesPage as FootballTablesPageComponent } from './FootballTablesPage';
@@ -16,7 +15,6 @@ type Story = StoryObj<typeof meta>;
 export const FootballTablesPage = {
 	args: {
 		regions,
-		goToCompetitionSpecificPage: fn(),
 		pageId: 'football/tables',
 		competitions: TableListDefault.args.competitions,
 		renderAds: true,

dotcom-rendering/src/components/FootballTablesPage.tsx

@@ -10,13 +10,13 @@ import type { FootballTableCompetition } from '../footballTables';
 import { grid } from '../grid';
 import { palette } from '../palette';
 import { AdSlot } from './AdSlot.web';
-import { FootballCompetitionSelect } from './FootballCompetitionSelect';
 import { FootballTableList } from './FootballTableList';
+import { FootballTablesCompetitionSelect } from './FootballTablesCompetitionSelect.importable';
+import { Island } from './Island';
 
 type Props = {
 	regions: Region[];
 	pageId: string;
-	goToCompetitionSpecificPage: (tag: string) => void;
 	competitions: FootballTableCompetition[];
 	renderAds: boolean;
 	guardianBaseUrl: string;
@@ -25,7 +25,6 @@ type Props = {
 export const FootballTablesPage = ({
 	regions,
 	pageId,
-	goToCompetitionSpecificPage,
 	competitions,
 	renderAds,
 	guardianBaseUrl,
@@ -75,12 +74,13 @@ export const FootballTablesPage = ({
 				grid-row: 2;
 			`}
 		>
-			<FootballCompetitionSelect
-				regions={regions}
-				kind="Tables"
-				pageId={pageId}
-				onChange={goToCompetitionSpecificPage}
-			/>
+			<Island priority="feature" defer={{ until: 'visible' }}>
+				<FootballTablesCompetitionSelect
+					regions={regions}
+					pageId={pageId}
+					guardianBaseUrl={guardianBaseUrl}
+				/>
+			</Island>
 		</div>
 		<div
 			css={css`