Render LiveBlogEpic only on serverSide render

Author: AnastasiiaBalenko

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

@@ -245,53 +245,43 @@ export const LiveBlogEpic = ({
 
 	const [pageUrl, setPageUrl] = useState<string | undefined>();
 
-	const [epicPlaceholder, setEpicPlaceholder] = useState<HTMLElement | null>(
-		null,
-	);
-
 	useEffect(() => {
 		setPageUrl(window.location.origin + window.location.pathname);
 	}, []);
 
-	useEffect(() => {
-		/**
-		 * Here we decide where to insert the epic.
-		 *
-		 * If the url contains a permalink then we
-		 * want to insert it immediately after that block to prevent any CLS issues.
-		 *
-		 * Otherwise, we choose a random position near the top of the blog
-		 */
-		const placeholder = document.createElement('article');
-		if (window.location.href.includes('#block-')) {
-			// Because we're using a permalink there's a possibility the epic will render in
-			// view. To prevent confusing layout shift we initially hide the message so that
-			// we can reveal (animate in) it once it has been rendered
-			placeholder.classList.add('pending');
-			const blockId = window.location.hash.slice(1);
-			const blockLinkedTo = document.getElementById(blockId);
-			if (blockLinkedTo) {
-				insertAfter(blockLinkedTo, placeholder);
-			}
-			placeholder.classList.add('reveal');
-			placeholder.classList.remove('pending');
-		} else {
-			// This is a simple page load so we simply insert the epic somewhere near the top
-			// of the blog
-			const randomPosition = Math.floor(Math.random() * 3) + 1; // 1, 2 or 3
-			const aBlockNearTheTop =
-				document.querySelectorAll<HTMLElement>('article.block')[
-					randomPosition
-				];
-			if (aBlockNearTheTop) {
-				insertAfter(aBlockNearTheTop, placeholder);
-			}
+	/**
+	 * Here we decide where to insert the epic.
+	 *
+	 * If the url contains a permalink then we
+	 * want to insert it immediately after that block to prevent any CLS issues.
+	 *
+	 * Otherwise, we choose a random position near the top of the blog
+	 */
+	const epicPlaceholder = document.createElement('article');
+	if (window.location.href.includes('#block-')) {
+		// Because we're using a permalink there's a possibility the epic will render in
+		// view. To prevent confusing layout shift we initially hide the message so that
+		// we can reveal (animate in) it once it has been rendered
+		epicPlaceholder.classList.add('pending');
+		const blockId = window.location.hash.slice(1);
+		const blockLinkedTo = document.getElementById(blockId);
+		if (blockLinkedTo) {
+			insertAfter(blockLinkedTo, epicPlaceholder);
 		}
-		setEpicPlaceholder(placeholder);
-		return () => {
-			placeholder.remove();
-		};
-	}, []);
+		epicPlaceholder.classList.add('reveal');
+		epicPlaceholder.classList.remove('pending');
+	} else {
+		// This is a simple page load so we simply insert the epic somewhere near the top
+		// of the blog
+		const randomPosition = Math.floor(Math.random() * 3) + 1; // 1, 2 or 3
+		const aBlockNearTheTop =
+			document.querySelectorAll<HTMLElement>('article.block')[
+				randomPosition
+			];
+		if (aBlockNearTheTop) {
+			insertAfter(aBlockNearTheTop, epicPlaceholder);
+		}
+	}
 
 	// First construct the payload
 	const payload = usePayload({
@@ -302,7 +292,7 @@ export const LiveBlogEpic = ({
 		pageId,
 		keywordIds,
 	});
-	if (!ophanPageViewId || !payload || !pageUrl || !epicPlaceholder) {
+	if (!ophanPageViewId || !payload || !pageUrl) {
 		return null;
 	}
 

dotcom-rendering/src/components/LiveBlogRenderer.tsx

@@ -138,7 +138,7 @@ export const LiveBlogRenderer = ({
 				shouldHideAds={shouldHideAds}
 				serverTime={serverTime}
 			/>
-			{isWeb && blocks.length > 4 && (
+			{isWeb && blocks.length > 4 && !isLiveUpdate && (
 				<Island
 					priority="feature"
 					// this should really be deferred until visible,