ui: prevent FOUC by hiding workspace and fading in after JS init

2026-04-27 21:07:56 +09:00
parent 592b6b1254
commit c1d536d367
2 changed files with 8 additions and 0 deletions
--- a/internal/webapp/static/app.js
+++ b/internal/webapp/static/app.js
@@ -527,3 +527,6 @@ document.querySelectorAll(".lang-btn").forEach((btn) => {
 window.renderAuth = renderAuth;
 window.setLanguage = setLanguage;
 renderAuth();
+requestAnimationFrame(() => {
+  document.documentElement.classList.add("is-ready");
+});
--- a/internal/webapp/static/index.html
+++ b/internal/webapp/static/index.html
@@ -5,6 +5,11 @@
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Tutor Platform</title>
    <link rel="stylesheet" href="/assets/styles.css" />
+    <style>
+      html { opacity: 0; transition: opacity 0.15s ease; }
+      html.is-ready { opacity: 1; }
+      #workspace-view { display: none; }
+    </style>
  </head>
  <body>
    <script>