Wrap carousel import in an island

guardian · Oct 22, 2024 · b27bf21 · b27bf21
1 parent f8af138
commit b27bf21
Showing 1 changed file with 36 additions and 30 deletions.
diff --git a/dotcom-rendering/src/components/ScrollableMedium.importable.tsx b/dotcom-rendering/src/components/ScrollableMedium.importable.tsx
@@ -7,7 +7,8 @@ import type {
 	DCRFrontCard,
 } from '../types/front';
 import { FrontCard } from './FrontCard';
-import { ScrollableCarousel } from './ScrollableCarousel';
+import { Island } from './Island';
+import { ScrollableCarousel } from './ScrollableCarousel.Importable';
 
 type Props = {
 	trails: DCRFrontCard[];
@@ -65,34 +66,39 @@ export const ScrollableMedium = ({
 	showAge,
 }: Props) => {
 	return (
-		<ScrollableCarousel carouselLength={trails.length}>
-			{trails.map((trail) => {
-				return (
-					<li key={trail.url} css={[itemStyles, verticalLineStyles]}>
-						<FrontCard
-							trail={trail}
-							imageLoading={imageLoading}
-							absoluteServerTimes={!!absoluteServerTimes}
-							containerPalette={containerPalette}
-							containerType={containerType}
-							showAge={!!showAge}
-							headlineSize="medium"
-							headlineSizeOnMobile="medium"
-							headlineSizeOnTablet="medium"
-							imagePositionOnDesktop="bottom"
-							imagePositionOnMobile="bottom"
-							imageSize="small" // TODO - needs fixed width images
-							trailText={undefined} // unsupported
-							supportingContent={undefined} // unsupported
-							aspectRatio="5:4"
-							kickerText={trail.kickerText}
-							showLivePlayable={trail.showLivePlayable}
-							showTopBarDesktop={false}
-							showTopBarMobile={false}
-						/>
-					</li>
-				);
-			})}
-		</ScrollableCarousel>
+		<Island priority="feature" defer={{ until: 'visible' }}>
+			<ScrollableCarousel carouselLength={trails.length}>
+				{trails.map((trail) => {
+					return (
+						<li
+							key={trail.url}
+							css={[itemStyles, verticalLineStyles]}
+						>
+							<FrontCard
+								trail={trail}
+								imageLoading={imageLoading}
+								absoluteServerTimes={!!absoluteServerTimes}
+								containerPalette={containerPalette}
+								containerType={containerType}
+								showAge={!!showAge}
+								headlineSize="medium"
+								headlineSizeOnMobile="medium"
+								headlineSizeOnTablet="medium"
+								imagePositionOnDesktop="bottom"
+								imagePositionOnMobile="bottom"
+								imageSize="small" // TODO - needs fixed width images
+								trailText={undefined} // unsupported
+								supportingContent={undefined} // unsupported
+								aspectRatio="5:4"
+								kickerText={trail.kickerText}
+								showLivePlayable={trail.showLivePlayable}
+								showTopBarDesktop={false}
+								showTopBarMobile={false}
+							/>
+						</li>
+					);
+				})}
+			</ScrollableCarousel>
+		</Island>
 	);
 };