From 40414264beb45f95ba4f9a2e063be7343ca2bf68 Mon Sep 17 00:00:00 2001
From: 3252a8 <3252a8@proton.me>
Date: Fri, 22 May 2026 23:24:59 +0300
Subject: [PATCH] feat: polish install guide loading state

---
 .../webapp/screens/InstallGuideScreen.svelte  | 41 +++++++++++++++++--
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/frontend/src/webapp/screens/InstallGuideScreen.svelte b/frontend/src/webapp/screens/InstallGuideScreen.svelte
index 0656143..2d41206 100644
--- a/frontend/src/webapp/screens/InstallGuideScreen.svelte
+++ b/frontend/src/webapp/screens/InstallGuideScreen.svelte
@@ -14,7 +14,7 @@
     Share2,
     Smartphone,
   } from "$components/ui/icons.js";
-  import { AttentionDot } from "$components/ui/index.js";
+  import { AttentionDot, Spinner } from "$components/ui/index.js";
   import { Select } from "$components/ui/primitives.js";
   import Button from "$components/ui/button.svelte";
   import Card from "$components/ui/card.svelte";
@@ -335,9 +335,14 @@
   </div>
 
   {#if guideState?.loading && !guideState?.loaded}
-    <Card class="install-empty">
-      <p>{t("wa_install_loading", {}, "Loading instructions...")}</p>
-    </Card>
+    <div
+      class="install-loading"
+      role="status"
+      aria-label={t("wa_install_loading", {}, "Loading instructions...")}
+    >
+      <Spinner size="lg" />
+      <span>{t("wa_install_loading", {}, "Loading instructions...")}</span>
+    </div>
   {:else if !guideState?.enabled || !config || !platforms.length}
     <Card class="install-empty">
       <p>{t("wa_install_unavailable", {}, "Instructions are unavailable.")}</p>
@@ -553,6 +558,22 @@
     gap: 14px;
   }
 
+  .install-loading {
+    display: grid;
+    min-height: min(360px, 48dvh);
+    place-items: center;
+    align-content: center;
+    gap: 12px;
+    color: var(--muted);
+    font-size: 13px;
+    font-weight: 700;
+    animation: install-loader-enter 0.16s ease-out both;
+  }
+
+  .install-loading :global(.ui-spinner) {
+    color: var(--accent);
+  }
+
   .install-selector-block {
     display: grid;
     gap: 9px;
@@ -1047,4 +1068,16 @@
       transform: scale(1);
     }
   }
+
+  @keyframes install-loader-enter {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
 </style>