Reserve workflow sample image space before loading

Author: georgi

marketing/src/components/TemplateSampleFigure.tsx

@@ -2,6 +2,9 @@ import Image from "next/image";
 import type { TemplateSample } from "@/data/templateSamples";
 
 export default function TemplateSampleFigure({ sample }: { sample: TemplateSample }) {
+  const imageWidth = sample.imageWidth ?? 1280;
+  const imageHeight = sample.imageHeight ?? 1020;
+
   return (
     <figure>
       {sample.inputText && (
@@ -11,7 +14,10 @@ export default function TemplateSampleFigure({ sample }: { sample: TemplateSampl
         </div>
       )}
       {sample.image && (
-        <div className={sample.inputImage ? "grid gap-4 md:grid-cols-2" : "mx-auto w-fit max-w-full"}>
+        <div
+          className={sample.inputImage ? "grid gap-4 md:grid-cols-2" : "mx-auto max-w-full"}
+          style={sample.inputImage ? undefined : { width: Math.min(imageWidth, (imageWidth / imageHeight) * 640) }}
+        >
           {[
             { src: sample.inputImage, label: "Input photo" },
             { src: sample.image, label: "Result" },
@@ -22,9 +28,9 @@ export default function TemplateSampleFigure({ sample }: { sample: TemplateSampl
                 <Image
                   src={src}
                   alt={label === "Input photo" ? label : sample.caption || "Workflow result"}
-                  width={label === "Input photo" ? 1024 : sample.imageWidth ?? 1280}
-                  height={label === "Input photo" ? 816 : sample.imageHeight ?? 1020}
-                  className={sample.inputImage ? "aspect-[5/4] w-full object-contain" : "mx-auto h-auto max-h-[640px] w-auto max-w-full object-contain"}
+                  width={label === "Input photo" ? 1024 : imageWidth}
+                  height={label === "Input photo" ? 816 : imageHeight}
+                  className={sample.inputImage ? "aspect-[5/4] w-full object-contain" : "h-auto w-full object-contain"}
                 />
               </div>
             </div>

marketing/tests/e2e/cls.spec.ts

@@ -8,7 +8,7 @@ const CLS_BUDGET = 0.1;
 
 // Pages this gate guards. The homepage is the one Google flagged (0.58); add
 // more paths here once each has been audited and reserves its media space.
-const ROUTES = ["/"];
+const ROUTES = ["/", "/templates/movie-posters"];
 
 // layout-shift entries aren't in the DOM lib.
 interface LayoutShiftEntry extends PerformanceEntry {
@@ -23,6 +23,33 @@ declare global {
 }
 
 test.describe("Cumulative Layout Shift budget", () => {
+  test("template samples reserve space before the image loads", async ({ page }) => {
+    let releaseImage!: () => void;
+    const imageReady = new Promise<void>((resolve) => { releaseImage = resolve; });
+    await page.route("**/templates/samples/movie-posters.webp", async (route) => {
+      await imageReady;
+      await route.continue();
+    });
+
+    try {
+      await page.goto("/templates/movie-posters", { waitUntil: "domcontentloaded" });
+      const image = page.locator("figure img");
+      const before = await image.boundingBox();
+      expect(before).not.toBeNull();
+      expect(before!.width).toBeGreaterThan(400);
+      expect(before!.height).toBeGreaterThan(600);
+      expect(await image.evaluate((element: HTMLImageElement) => element.complete)).toBe(false);
+
+      releaseImage();
+      await image.evaluate((element: HTMLImageElement) => element.decode());
+      const after = await image.boundingBox();
+      expect(after!.width).toBeCloseTo(before!.width, 0);
+      expect(after!.height).toBeCloseTo(before!.height, 0);
+    } finally {
+      releaseImage();
+    }
+  });
+
   for (const path of ROUTES) {
     test(`${path} stays under ${CLS_BUDGET} CLS through a full scroll`, async ({
       page,