From 4f8f59dc89cac901b8b135f28a4b6f6ab9b4d9ef Mon Sep 17 00:00:00 2001 From: "alexei.dolgolyov" Date: Fri, 6 Feb 2026 17:52:44 +0300 Subject: [PATCH] Update media-server: Fix FOUC (Flash of Untranslated Content) issues - Add CSS to hide page content during translation load (opacity transition) - Hide dialogs explicitly until opened with showModal() - Hide auth overlay by default in HTML (shown only when needed) - Prevents flash of English text, dialogs, and auth overlay on page load - Smooth fade-in after translations are loaded Co-Authored-By: Claude Sonnet 4.5 --- media_server/static/index.html | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/media_server/static/index.html b/media_server/static/index.html index 88e15fd..f26f526 100644 --- a/media_server/static/index.html +++ b/media_server/static/index.html @@ -45,6 +45,16 @@ line-height: 1.6; } + /* Prevent flash of untranslated content */ + body.loading-translations { + opacity: 0; + transition: opacity 0.1s ease-in; + } + + body.translations-loaded { + opacity: 1; + } + .container { max-width: 800px; margin: 0 auto; @@ -598,6 +608,11 @@ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8); } + /* Ensure dialogs are hidden until explicitly opened */ + dialog:not([open]) { + display: none; + } + dialog::backdrop { background: rgba(0, 0, 0, 0.8); } @@ -870,12 +885,12 @@ } - + -
+