From 5796ba8c631aacd059b782928fd5ee47ed005c6d Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Thu, 16 Apr 2026 18:09:24 -0400
Subject: [PATCH 1/2] delay-screenshot-motion

since adding lazy loaded charts which contain motion, screenshots for them are firing before they are rendered.

I added "lazy-loaded" class to showControl.svelte, and check for that in generate-screenshots.ts. If found introduce pause to allow them to fully render.
---
 docs/scripts/generate-screenshots.ts                     | 8 ++++++++
 docs/src/lib/components/controls/fields/ShowField.svelte | 5 ++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/docs/scripts/generate-screenshots.ts b/docs/scripts/generate-screenshots.ts
index 357783b79..4e50a2ab7 100644
--- a/docs/scripts/generate-screenshots.ts
+++ b/docs/scripts/generate-screenshots.ts
@@ -214,6 +214,14 @@ async function captureScreenshots(
 		// Navigate to the example
 		await page.goto(url, { waitUntil: 'networkidle' });
 
+		// wait for the page to be ready
+		await page.waitForLoadState('domcontentloaded');
+
+		// wait if the lazy-loaded element found
+		if (document.querySelectorAll('lazy-loaded')) {
+			await new Promise((resolve) => setTimeout(resolve, 2000));
+		}
+
 		// Hide example controls before taking screenshots
 		await page.evaluate(() => {
 			const controls = document.querySelectorAll('.screenshot-hidden');
diff --git a/docs/src/lib/components/controls/fields/ShowField.svelte b/docs/src/lib/components/controls/fields/ShowField.svelte
index 640172bd0..66dd242d6 100644
--- a/docs/src/lib/components/controls/fields/ShowField.svelte
+++ b/docs/src/lib/components/controls/fields/ShowField.svelte
@@ -27,7 +27,10 @@
 </script>
 
 {#if !inline}
-	<div bind:this={target} class="grid grid-cols-[auto_1fr] gap-2 mb-3 screenshot-hidden">
+	<div
+		bind:this={target}
+		class="grid grid-cols-[auto_1fr] gap-2 mb-3 screenshot-hidden lazy-loaded"
+	>
 		<Field {label} {labelPlacement} let:id class={className}>
 			<Switch bind:checked={show} size="md" />
 		</Field>

From 54d29661a5edaa9c1480ac3befb3d1d9b98e35b8 Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Thu, 16 Apr 2026 20:53:15 -0400
Subject: [PATCH 2/2] delay-screenshot-motion

since adding lazy loaded charts which contain motion, screenshots for them are firing before they are rendered.

I added "screenshot-delay" class to showControl.svelte, and check for that in generate-screenshots.ts. If found introduce pause to allow them to fully render.
---
 docs/scripts/generate-screenshots.ts                     | 2 +-
 docs/src/lib/components/controls/fields/ShowField.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/scripts/generate-screenshots.ts b/docs/scripts/generate-screenshots.ts
index 4e50a2ab7..b332bab88 100644
--- a/docs/scripts/generate-screenshots.ts
+++ b/docs/scripts/generate-screenshots.ts
@@ -218,7 +218,7 @@ async function captureScreenshots(
 		await page.waitForLoadState('domcontentloaded');
 
 		// wait if the lazy-loaded element found
-		if (document.querySelectorAll('lazy-loaded')) {
+		if (document.querySelectorAll('screenshot-delay')) {
 			await new Promise((resolve) => setTimeout(resolve, 2000));
 		}
 
diff --git a/docs/src/lib/components/controls/fields/ShowField.svelte b/docs/src/lib/components/controls/fields/ShowField.svelte
index 66dd242d6..6f13666ff 100644
--- a/docs/src/lib/components/controls/fields/ShowField.svelte
+++ b/docs/src/lib/components/controls/fields/ShowField.svelte
@@ -29,7 +29,7 @@
 {#if !inline}
 	<div
 		bind:this={target}
-		class="grid grid-cols-[auto_1fr] gap-2 mb-3 screenshot-hidden lazy-loaded"
+		class="grid grid-cols-[auto_1fr] gap-2 mb-3 screenshot-hidden screenshot-delay"
 	>
 		<Field {label} {labelPlacement} let:id class={className}>
 			<Switch bind:checked={show} size="md" />