danvics/pediatric-ai-scribe-v3
1
0
Fork 0
Code Issues Pull requests Projects Releases 16 Packages Wiki Activity Actions

fix: lazily loaded components stay invisible until their stylesheet and init are ready
All checks were successful
Forgejo Docker Build / Root app tests (push) Successful in 48s
Details
Forgejo Docker Build / Build Docker image (push) Successful in 12s
Details
Forgejo Docker Build / End-to-end (browser) (push) Successful in 5s
Details

Browse source 
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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Dv6sqaY6Vq3ChZHMem3cnU
This commit is contained in:
Daniel 2026-09-14 05:11:26 +02:00
parent 8142dd4ab1
commit 012a06c107
1 changed files with 5 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
public/css/styles.css
View file

@ -1367,6 +1367,11 @@ body.assistant-workspace #assistant-tab.active { width:100%; }
settings had loaded fine. Previous fixes bolted style="display:none" onto settings had loaded fine. Previous fixes bolted style="display:none" onto
individual elements; this fixes every one of them at once. */ individual elements; this fixes every one of them at once. */
[hidden] { display: none !important; } [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 */ /* 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; } button, a, .btn-sm, .btn-generate, .btn-send, .tab-btn, input, textarea, select, label { touch-action: manipulation; }