Merge pull request #9366 from guardian/mxdvl/islands-ssr/Lightbox

dotcom-rendering/src/components/Island.test.tsx

@@ -9,6 +9,8 @@ import { ConfigProvider } from './ConfigContext';
 import { EnhancePinnedPost } from './EnhancePinnedPost.importable';
 import { InteractiveSupportButton } from './InteractiveSupportButton.importable';
 import { Island } from './Island';
+import { LightboxHash } from './LightboxHash.importable';
+import { LightboxJavascript } from './LightboxJavascript.importable';
 import { LiveBlogEpic } from './LiveBlogEpic.importable';
 import { Liveness } from './Liveness.importable';
 import { Metrics } from './Metrics.importable';
@@ -148,6 +150,24 @@ describe('Island: server-side rendering', () => {
 		).not.toThrow();
 	});
 
+	test('LightboxHash', () => {
+		expect(() => renderToString(<LightboxHash />)).not.toThrow();
+	});
+
+	test('LightboxJavascript', () => {
+		expect(() =>
+			renderToString(
+				<LightboxJavascript
+					format={{
+						theme: Pillar.Culture,
+						design: ArticleDesign.PhotoEssay,
+						display: ArticleDisplay.Showcase,
+					}}
+					images={[]}
+				/>,
+			),
+		).not.toThrow();
+	});
 	test('Liveness', () => {
 		expect(() =>
 			renderToString(

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

@@ -1,6 +1,6 @@
-import { log, storage } from '@guardian/libs';
+import { isNonNullable, log, storage } from '@guardian/libs';
 import libDebounce from 'lodash.debounce';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import screenfull from 'screenfull';
 import type { ImageForLightbox } from '../types/content';
@@ -490,9 +490,12 @@ export const LightboxJavascript = ({
 	format: ArticleFormat;
 	images: ImageForLightbox[];
 }) => {
-	const lightbox = document.querySelector<HTMLElement>('#gu-lightbox');
+	const [root, setRoot] = useState<HTMLUListElement>();
+
 	useEffect(() => {
-		if (!lightbox) return;
+		const lightbox = document.querySelector<HTMLElement>('#gu-lightbox');
+		if (!isNonNullable(lightbox)) return;
+
 		/**
 		 * We only want to initialise the lightbox once so we check to see if it is already marked as ready
 		 */
@@ -501,25 +504,30 @@ export const LightboxJavascript = ({
 			return;
 		}
 		initialiseLightbox(lightbox);
-	}, [lightbox]);
 
-	/**
-	 * Hydration has been requested so the first step is to render the list of images and put them into
-	 * the DOM
-	 *
-	 * LightboxLayout provides a marker for where these images should go `ul#lightbox-images`. We look for
-	 * this and then use createPortal to insert LightboxImages into this location.
-	 *
-	 * Why do we do this here, and not on the server?
-	 * Because the size of the html generated by LightboxImages is very large (because the Picture element
-	 * is so verbose) and we don't want every page view to have to download it, only those that are opening
-	 * lightbox
-	 */
-	const imageRoot = lightbox?.querySelector('ul#lightbox-images');
-	if (!imageRoot) return null;
+		/**
+		 * Hydration has been requested so the first step is to render the list of images and put them into
+		 * the DOM
+		 *
+		 * LightboxLayout provides a marker for where these images should go `ul#lightbox-images`. We look for
+		 * this and then use createPortal to insert LightboxImages into this location.
+		 *
+		 * Why do we do this here, and not on the server?
+		 * Because the size of the html generated by LightboxImages is very large (because the Picture element
+		 * is so verbose) and we don't want every page view to have to download it, only those that are opening
+		 * lightbox
+		 */
+		const ul =
+			lightbox.querySelector<HTMLUListElement>('ul#lightbox-images');
+
+		if (isNonNullable(ul)) setRoot(ul);
+	}, []);
+
+	if (!root) return null;
+
 	log('dotcom', '💡 Generating HTML for lightbox images...');
 	return ReactDOM.createPortal(
 		<LightboxImages format={format} images={images} />,
-		imageRoot,
+		root,
 	);
 };