alexei.dolgolyov/wled-screen-controller-mixed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix FOUC and improve Web UI i18n experience
Some checks failed
Validate / validate (push) Failing after 8s
Details

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-02-06 17:53:02 +03:00
parent 5405e81cba
commit 110b3ae4ea
5 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
server/config/test_config.yaml
View File

@@ -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

4
server/src/wled_controller/static/app.js
View File

@@ -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');

6
server/src/wled_controller/static/index.html
View File

@@ -7,7 +7,7 @@
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>💡</text></svg>">
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<body style="visibility: hidden;">
<div class="container">
<header>
<h1 data-i18n="app.title">WLED Screen Controller</h1>
@@ -21,8 +21,8 @@
<option value="en">English</option>
<option value="ru">Русский</option>
</select>
<span id="auth-status" style="margin-left: 10px; display: none;">
<span id="logged-in-user" style="color: #4CAF50; margin-right: 8px;" data-i18n="auth.authenticated">● Authenticated</span>
<span id="auth-status" style="margin-left: 10px; display: none; white-space: nowrap;">
<span id="logged-in-user" style="color: #4CAF50;" data-i18n="auth.authenticated">Authenticated</span>
</span>
<button id="login-btn" class="btn btn-primary" onclick="showLogin()" style="display: none; padding: 6px 16px; font-size: 0.85rem; margin-left: 10px;">
🔑 <span data-i18n="auth.login">Login</span>

2
server/src/wled_controller/static/locales/en.json
View File

@@ -5,7 +5,7 @@
"locale.change": "Change language",
"auth.login": "Login",
"auth.logout": "Logout",
"auth.authenticated": "Authenticated",
"auth.authenticated": "● Authenticated",
"auth.title": "Login to WLED Controller",
"auth.message": "Please enter your API key to authenticate and access the WLED Screen Controller.",
"auth.label": "API Key:",

2
server/src/wled_controller/static/locales/ru.json
View File

@@ -5,7 +5,7 @@
"locale.change": "Изменить язык",
"auth.login": "Войти",
"auth.logout": "Выйти",
"auth.authenticated": "Авторизован",
"auth.authenticated": "● Авторизован",
"auth.title": "Вход в WLED Контроллер",
"auth.message": "Пожалуйста, введите ваш API ключ для аутентификации и доступа к WLED Контроллеру Экрана.",
"auth.label": "API Ключ:",