From 5c57f1411a8bd28c5f6bf76300bd52bc4f4c1ef5 Mon Sep 17 00:00:00 2001
From: chrmc40 <charles.ross.mc40@gmail.com>
Date: Mon, 29 Jun 2026 08:28:42 -0700
Subject: [PATCH] Fix slow first-open of the tag-builder picker

The default 'all' view mounts ~4,200 cards at once; almost all are off-screen.
Add content-visibility:auto so the browser defers layout/paint of off-screen
cards until they scroll into view. Initial open is now noticeably faster;
behaviour is unchanged (cards stay queryable/scrollable/findable).
---
 js/lib/svelte/assets/promptchain-svelte.css           | 8 ++++++++
 svelte-src/components/tag-builder2/TagBuilder2.svelte | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/js/lib/svelte/assets/promptchain-svelte.css b/js/lib/svelte/assets/promptchain-svelte.css
index 49d153a..b85e5b4 100644
--- a/js/lib/svelte/assets/promptchain-svelte.css
+++ b/js/lib/svelte/assets/promptchain-svelte.css
@@ -5756,6 +5756,14 @@
     flex-direction: column;
     gap: 6px;
     position: relative;
+    /* The "all" view mounts thousands of cards but only ~30-50 are ever on
+       screen. content-visibility defers layout/paint of off-screen cards until
+       they near the viewport — they stay in the DOM (queryable, scrollable,
+       find-in-page), so behaviour is unchanged but the initial open is cheap.
+       The auto intrinsic size remembers each card's real height after first
+       paint, keeping scroll height stable. */
+    content-visibility: auto;
+    contain-intrinsic-size: auto 150px;
   }
   .pcr-atb2-card-mod-dot.svelte-ibd6yj {
     display: inline-block;
diff --git a/svelte-src/components/tag-builder2/TagBuilder2.svelte b/svelte-src/components/tag-builder2/TagBuilder2.svelte
index 561c099..b72c442 100644
--- a/svelte-src/components/tag-builder2/TagBuilder2.svelte
+++ b/svelte-src/components/tag-builder2/TagBuilder2.svelte
@@ -6281,6 +6281,14 @@
     flex-direction: column;
     gap: 6px;
     position: relative;
+    /* The "all" view mounts thousands of cards but only ~30-50 are ever on
+       screen. content-visibility defers layout/paint of off-screen cards until
+       they near the viewport — they stay in the DOM (queryable, scrollable,
+       find-in-page), so behaviour is unchanged but the initial open is cheap.
+       The auto intrinsic size remembers each card's real height after first
+       paint, keeping scroll height stable. */
+    content-visibility: auto;
+    contain-intrinsic-size: auto 150px;
   }
   .pcr-atb2-card-mod-dot {
     display: inline-block;