diff --git a/docs/scripts/generate-screenshots.ts b/docs/scripts/generate-screenshots.ts
index 357783b79..b332bab88 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('screenshot-delay')) {
+			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..6f13666ff 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 screenshot-delay"
+	>
 		<Field {label} {labelPlacement} let:id class={className}>
 			<Switch bind:checked={show} size="md" />
 		</Field>