From 110b3ae4eaccde04def266e5dab5a402211cd3cc Mon Sep 17 00:00:00 2001 From: "alexei.dolgolyov" Date: Fri, 6 Feb 2026 17:53:02 +0300 Subject: [PATCH] Fix FOUC and improve Web UI i18n experience MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Fix Flash of Unstyled Content (FOUC) by hiding page until translations load - Hide body initially with visibility:hidden - Show content after translations are applied to avoid English flash - Fix authenticated indicator layout with white-space:nowrap - Add "●" symbol to translation files to prevent disappearance on reload - Enable network access by binding server to 0.0.0.0 in test config - Simplify test config API keys to single entry Co-Authored-By: Claude Sonnet 4.5 --- server/config/test_config.yaml | 5 ++--- server/src/wled_controller/static/app.js | 4 ++++ server/src/wled_controller/static/index.html | 6 +++--- server/src/wled_controller/static/locales/en.json | 2 +- server/src/wled_controller/static/locales/ru.json | 2 +- 5 files changed, 11 insertions(+), 8 deletions(-) diff --git a/server/config/test_config.yaml b/server/config/test_config.yaml index 750b953..8112812 100644 --- a/server/config/test_config.yaml +++ b/server/config/test_config.yaml @@ -1,15 +1,14 @@ server: - host: "127.0.0.1" # localhost only for testing + host: "0.0.0.0" # Listen on all interfaces (accessible from local network) port: 8080 log_level: "DEBUG" # Verbose logging for testing cors_origins: - "*" auth: - # Test API keys - DO NOT use in production! + # Test API key - DO NOT use in production! api_keys: test_client: "eb8a89cfd33ab067751fd0e38f74ddf7ac3d75ff012fbab35a616c45c12e0c8d" - web_dashboard: "4b958666d32b368a89781da040a615283541418753d610858d6eb5411296dcb6" processing: default_fps: 30 diff --git a/server/src/wled_controller/static/app.js b/server/src/wled_controller/static/app.js index beb29f9..235977e 100644 --- a/server/src/wled_controller/static/app.js +++ b/server/src/wled_controller/static/app.js @@ -132,6 +132,10 @@ function updateAllText() { document.addEventListener('DOMContentLoaded', async () => { // Initialize locale first await initLocale(); + + // Show content now that translations are loaded + document.body.style.visibility = 'visible'; + // Load API key from localStorage apiKey = localStorage.getItem('wled_api_key'); diff --git a/server/src/wled_controller/static/index.html b/server/src/wled_controller/static/index.html index 0e73c12..9c1b848 100644 --- a/server/src/wled_controller/static/index.html +++ b/server/src/wled_controller/static/index.html @@ -7,7 +7,7 @@ - +

WLED Screen Controller

@@ -21,8 +21,8 @@ -