From 012a06c1079f729ae4e1817e42db71997cc881ac Mon Sep 17 00:00:00 2001 From: Daniel Date: Mon, 14 Sep 2026 05:11:26 +0200 Subject: [PATCH] fix: lazily loaded components stay invisible until their stylesheet and init are ready The fragment's markup was inserted before its own stylesheet resolved, so a first visit to the assistant tab flashed unstyled content. The pending marker app.js already sets now also hides the markup; the Loading status line is all that shows until the tab reports ready. Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_01Dv6sqaY6Vq3ChZHMem3cnU --- public/css/styles.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/public/css/styles.css b/public/css/styles.css index f1e5c7d8..607bf1e2 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -1367,6 +1367,11 @@ body.assistant-workspace #assistant-tab.active { width:100%; } settings had loaded fine. Previous fixes bolted style="display:none" onto individual elements; this fixes every one of them at once. */ [hidden] { display: none !important; } +/* A lazily loaded component arrives with its own stylesheet; its markup is + inserted before that stylesheet resolves, so it stays invisible (but laid + out) until the tab reports ready and app.js clears the marker. The + "Loading…" status line next to it is the only thing shown meanwhile. */ +[data-component-pending] { visibility: hidden; } /* iOS: taps on controls must not trigger double-tap zoom */ button, a, .btn-sm, .btn-generate, .btn-send, .tab-btn, input, textarea, select, label { touch-action: manipulation; }