From 1a761e8e15648d9841ee54e7f345286bff3a4302 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sun, 28 Jun 2026 15:00:39 +0900
Subject: [PATCH] feat: add blazor loading indicator during page transitions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Issue**: White screen appears 1-2 seconds during page load/transitions while Blazor circuit connects

**Solution**: Add loading spinner overlay that displays while Blazor initializes

**Changes**:
1. App.razor: Add loading overlay HTML element
2. admin.css: Add loading spinner styles + animations
3. admin-session.js: Show overlay on load, hide when Blazor circuit ready

**UX Flow**:
- Page load starts → Blazor loading spinner appears
- Blazor circuit connects (~1-2s) → Spinner disappears
- Page fully interactive → User sees content

**Styling**:
- Centered spinner with 'Loading...' text
- Semi-transparent background (blur effect)
- Smooth fade-out when complete
- High z-index (9999) to cover all content

This provides clear visual feedback that the app is working, not frozen.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 TaxBaik.Web/Components/Admin/App.razor  |  6 +++
 TaxBaik.Web/wwwroot/css/admin.css       | 58 +++++++++++++++++++++++++
 TaxBaik.Web/wwwroot/js/admin-session.js | 12 +++++
 3 files changed, 76 insertions(+)

diff --git a/TaxBaik.Web/Components/Admin/App.razor b/TaxBaik.Web/Components/Admin/App.razor
index 35b8075..8fbde11 100644
--- a/TaxBaik.Web/Components/Admin/App.razor
+++ b/TaxBaik.Web/Components/Admin/App.razor
@@ -24,6 +24,12 @@
             <span>배포 또는 서버 재시작 중이면 잠시 후 자동으로 새로고침됩니다.</span>
         </div>
     </div>
+    <div id="blazor-loading" class="blazor-loading-overlay">
+        <div class="blazor-loading-spinner">
+            <div class="spinner"></div>
+            <p>로드 중...</p>
+        </div>
+    </div>
     <MudThemeProvider @bind-IsDarkMode="isDarkMode" Theme="mudTheme" />
     <MudDialogProvider />
     <MudSnackbarProvider />
diff --git a/TaxBaik.Web/wwwroot/css/admin.css b/TaxBaik.Web/wwwroot/css/admin.css
index 72aa5c6..b61a6ec 100644
--- a/TaxBaik.Web/wwwroot/css/admin.css
+++ b/TaxBaik.Web/wwwroot/css/admin.css
@@ -1370,3 +1370,61 @@ textarea:focus-visible {
     break-inside: avoid;
   }
 }
+
+/* ============================================================================
+   Blazor Loading Indicator
+   ============================================================================ */
+
+#blazor-loading {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(4px);
+  z-index: 9999;
+  align-items: center;
+  justify-content: center;
+}
+
+#blazor-loading.show {
+  display: flex;
+}
+
+.blazor-loading-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.blazor-loading-spinner {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.blazor-loading-spinner p {
+  margin: 0;
+  font-size: 1rem;
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.spinner {
+  width: 48px;
+  height: 48px;
+  border: 4px solid var(--bg-tertiary);
+  border-top-color: var(--primary-color);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
diff --git a/TaxBaik.Web/wwwroot/js/admin-session.js b/TaxBaik.Web/wwwroot/js/admin-session.js
index 3a135f9..43ae8ba 100644
--- a/TaxBaik.Web/wwwroot/js/admin-session.js
+++ b/TaxBaik.Web/wwwroot/js/admin-session.js
@@ -15,6 +15,18 @@ window.taxbaikAdminSession = {
         window.taxbaikAdminSession.syncRouteClass();
         window.addEventListener('popstate', window.taxbaikAdminSession.syncRouteClass);
 
+        // Show loading indicator on page load (hide when Blazor circuit connects)
+        const loadingOverlay = document.getElementById('blazor-loading');
+        if (loadingOverlay) {
+            loadingOverlay.classList.add('show');
+            // Hide loading when Blazor is ready
+            Blazor.start().then(() => {
+                if (loadingOverlay) {
+                    loadingOverlay.classList.remove('show');
+                }
+            });
+        }
+
         const modal = document.getElementById('components-reconnect-modal');
         if (!modal) {
             return;