Restore Island

Author: RikRootsGuardian

…onents/LoopVideoInArticle.importable.tsx …ng/src/components/LoopVideoInArticle.tsxdotcom-rendering/src/components/LoopVideoInArticle.importable.tsx renamed to dotcom-rendering/src/components/LoopVideoInArticle.tsx dotcom-rendering/src/components/LoopVideoInArticle.importable.tsx renamed to dotcom-rendering/src/components/LoopVideoInArticle.tsx

@@ -8,6 +8,7 @@ import {
 import type { MediaAtomBlockElement } from '../types/content';
 import { Caption } from './Caption';
 import { SelfHostedVideo } from './SelfHostedVideo.importable';
+import { Island } from './Island';
 
 type LoopVideoInArticleProps = {
 	element: MediaAtomBlockElement;
@@ -29,7 +30,7 @@ export const LoopVideoInArticle = ({
 	}
 
 	return (
-		<>
+		<Island priority="critical" defer={{ until: 'visible' }}>
 			<SelfHostedVideo
 				atomId={element.id}
 				fallbackImage={posterImageUrl}
@@ -57,6 +58,6 @@ export const LoopVideoInArticle = ({
 					mediaType="SelfHostedVideo"
 				/>
 			)}
-		</>
+		</Island>
 	);
 };

dotcom-rendering/src/lib/renderElement.tsx

@@ -29,7 +29,7 @@ import { Island } from '../components/Island';
 import { ItemLinkBlockElement } from '../components/ItemLinkBlockElement';
 import { KeyTakeaways } from '../components/KeyTakeaways';
 import { KnowledgeQuizAtom } from '../components/KnowledgeQuizAtom.importable';
-import { LoopVideoInArticle } from '../components/LoopVideoInArticle.importable';
+import { LoopVideoInArticle } from '../components/LoopVideoInArticle';
 import { MainMediaEmbedBlockComponent } from '../components/MainMediaEmbedBlockComponent';
 import { MapEmbedBlockComponent } from '../components/MapEmbedBlockComponent.importable';
 import { MiniProfiles } from '../components/MiniProfiles';