From ec776140ef1d7fd84bb032f2542db271ff6406dd Mon Sep 17 00:00:00 2001
From: Miguel Torres <1233880+mmtr@users.noreply.github.com>
Date: Wed, 4 Dec 2024 11:38:07 +0100
Subject: [PATCH] Themes: Lazy load screenshots (#96961)

Defers the loading of the theme screenshots in the theme showcase until the user scrolls near them with a `loading='lazy'` attribute, effectively decreasing the initial data load from 35MB to 2.5MB (-92%).
---
 client/components/theme/index.jsx                         | 1 +
 client/components/theme/test/__snapshots__/index.jsx.snap | 1 +
 2 files changed, 2 insertions(+)

diff --git a/client/components/theme/index.jsx b/client/components/theme/index.jsx
index 6df94f59d7ae1..bcc5f3472ba96 100644
--- a/client/components/theme/index.jsx
+++ b/client/components/theme/index.jsx
@@ -204,6 +204,7 @@ export class Theme extends Component {
 
 		return (
 			<img
+				loading="lazy"
 				alt={ isScreenshotLoaded ? decodeEntities( description ) : '' }
 				className="theme__img"
 				src={ themeImgSrc }
diff --git a/client/components/theme/test/__snapshots__/index.jsx.snap b/client/components/theme/test/__snapshots__/index.jsx.snap
index f10a39a1f8269..996f034f31f33 100644
--- a/client/components/theme/test/__snapshots__/index.jsx.snap
+++ b/client/components/theme/test/__snapshots__/index.jsx.snap
@@ -19,6 +19,7 @@ exports[`Theme rendering should match snapshot 1`] = `
         <img
           alt=""
           class="theme__img"
+          loading="lazy"
           src="https://i0.wp.com/s0.wp.com/wp-content/themes/pub/twentyseventeen/screenshot.png?fit=479%2C360"
           srcset="https://i0.wp.com/s0.wp.com/wp-content/themes/pub/twentyseventeen/screenshot.png?fit=479%2C360&zoom=2 2x"
         />