모바일 로그인창 테스트 강화

userfront/web/index.html

@@ -53,7 +53,7 @@
         box-sizing: border-box;
         display: flex;
         flex-direction: column;
-        gap: 24px;
+        gap: 18px;
         inset: 0;
         justify-content: center;
         min-height: 100%;
@@ -83,6 +83,20 @@
         margin: 0;
       }
 
+      #baron-bootstrap-shell .signin-preview {
+        align-items: center;
+        background: #1d4ed8;
+        border-radius: 8px;
+        color: #ffffff;
+        display: flex;
+        font-size: clamp(15px, 3vw, 18px);
+        font-weight: 700;
+        justify-content: center;
+        min-height: 48px;
+        min-width: min(280px, 80vw);
+        padding: 0 24px;
+      }
+
       #baron-bootstrap-shell .loader {
         animation: baron-spin 880ms linear infinite;
         border: 5px solid #cbd5e1;
@@ -104,13 +118,22 @@
       <h1>Baron SW Portal</h1>
       <div class="loader" aria-hidden="true"></div>
       <p>Loading sign-in</p>
+      <div class="signin-preview" aria-hidden="true">Sign in</div>
     </main>
     <script>
+      var baronBootstrapStartedAt = performance.now();
+      var baronMinimumShellMs = 1100;
       window.addEventListener("flutter-first-frame", function () {
-        document.body.classList.add("flutter-ready");
-        window.setTimeout(function () {
-          document.getElementById("baron-bootstrap-shell")?.remove();
-        }, 220);
+        var elapsedMs = performance.now() - baronBootstrapStartedAt;
+        window.setTimeout(
+          function () {
+            document.body.classList.add("flutter-ready");
+            window.setTimeout(function () {
+              document.getElementById("baron-bootstrap-shell")?.remove();
+            }, 220);
+          },
+          Math.max(0, baronMinimumShellMs - elapsedMs),
+        );
       });
     </script>
     <script src="flutter_bootstrap.js" async></script>