From 7f4a502fe149a51580bae5f3aee9bfbd5ca2f7c3 Mon Sep 17 00:00:00 2001
From: SysAdmin <sysadmin@silverlabs.uk>
Date: Thu, 2 Oct 2025 16:39:47 +0100
Subject: [PATCH] Feature: Add elegant PWA loading screen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implemented a professional loading screen for the PWA to eliminate the
"hang and wait" experience during app initialization.

Changes:
- Added full-screen gradient loading overlay with TeleShop branding
- Implemented animated triple-ring spinner with smooth animations
- Added automatic removal after PWA initialization (500ms fade-out)
- Included 5-second fallback timeout to prevent infinite loading
- Updated service worker cache version to v2
- Enhanced JWT validation to detect test/temporary keys
- Updated appsettings.json with secure JWT key

Design Features:
- Purple/blue gradient background matching brand colors
- Pulsing logo animation for visual interest
- Staggered spinner rings with cubic-bezier easing
- Fade-in-out loading text animation
- Mobile-responsive design (scales appropriately on all devices)

Technical Implementation:
- Loading screen visible by default (no FOUC)
- Removed via JavaScript when PWA manager initialization completes
- Graceful fade-out animation before DOM removal
- Console logging for debugging

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../Areas/Admin/Views/Shared/_Layout.cshtml   |  16 ++
 .../ConfigurationValidationService.cs         |   4 +-
 LittleShop/appsettings.json                   |   2 +-
 LittleShop/wwwroot/css/mobile-admin.css       | 146 ++++++++++++++++++
 LittleShop/wwwroot/js/pwa.js                  |  32 +++-
 LittleShop/wwwroot/service-worker.js          |   2 +-
 6 files changed, 197 insertions(+), 5 deletions(-)
diff --git a/LittleShop/Areas/Admin/Views/Shared/_Layout.cshtml b/LittleShop/Areas/Admin/Views/Shared/_Layout.cshtml
index e9cf8c4..6d1e760 100644
--- a/LittleShop/Areas/Admin/Views/Shared/_Layout.cshtml
+++ b/LittleShop/Areas/Admin/Views/Shared/_Layout.cshtml
@@ -40,6 +40,22 @@
     @await RenderSectionAsync("Head", required: false)
 </head>
 <body>
+    <!-- PWA Loading Screen -->
+    <div id="pwa-loading-screen" class="pwa-loading-screen">
+        <div class="pwa-loading-content">
+            <div class="pwa-loading-logo">
+                <i class="fas fa-store"></i>
+            </div>
+            <h1 class="pwa-loading-title">TeleShop</h1>
+            <div class="pwa-loading-spinner">
+                <div class="spinner-ring"></div>
+                <div class="spinner-ring"></div>
+                <div class="spinner-ring"></div>
+            </div>
+            <p class="pwa-loading-text">Loading your dashboard...</p>
+        </div>
+    </div>
+
     <header>
         <nav class="navbar navbar-expand-sm navbar-light bg-white">
             <div class="container-fluid">
diff --git a/LittleShop/Services/ConfigurationValidationService.cs b/LittleShop/Services/ConfigurationValidationService.cs
index 5447334..6a54df1 100644
--- a/LittleShop/Services/ConfigurationValidationService.cs
+++ b/LittleShop/Services/ConfigurationValidationService.cs
@@ -55,8 +55,8 @@ public class ConfigurationValidationService
             throw new InvalidOperationException("🚨 CRITICAL: JWT Key not configured. Set Jwt:Key in appsettings.json");
         }
 
-        // Check for the old hardcoded key
-        if (jwtKey.Contains("ThisIsASuperSecretKey"))
+        // Check for the old hardcoded keys
+        if (jwtKey.Contains("ThisIsASuperSecretKey") || jwtKey.Contains("ThisIsATemporary"))
         {
             throw new InvalidOperationException("🚨 CRITICAL: Default JWT key detected. Generate a new secure key!");
         }
diff --git a/LittleShop/appsettings.json b/LittleShop/appsettings.json
index e83c9ed..2c66a96 100644
--- a/LittleShop/appsettings.json
+++ b/LittleShop/appsettings.json
@@ -3,7 +3,7 @@
     "DefaultConnection": "Data Source=littleshop.db"
   },
   "Jwt": {
-    "Key": "ThisIsATemporaryKeyFor-TestingPurposesOnlyGenerateSecureKey1234567890ABCDEF",
+    "Key": "9xKmN3pQwR7vYzH4bFtJ8sLcE2nW6aVgDhU5kXmP1oZiAqBjCrTy0MxSfGdIlPeWuO",
     "Issuer": "LittleShop",
     "Audience": "LittleShop",
     "ExpiryInHours": 24
diff --git a/LittleShop/wwwroot/css/mobile-admin.css b/LittleShop/wwwroot/css/mobile-admin.css
index c0be695..530f3a8 100644
--- a/LittleShop/wwwroot/css/mobile-admin.css
+++ b/LittleShop/wwwroot/css/mobile-admin.css
@@ -454,4 +454,150 @@ button, a, .clickable {
     color: #6b7280;
     font-size: 14px;
     margin-top: 5px;
+}
+
+/* ========================================
+   PWA Loading Screen
+   ======================================== */
+
+.pwa-loading-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    opacity: 1;
+    transition: opacity 0.5s ease-out;
+}
+
+.pwa-loading-screen.fade-out {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.pwa-loading-content {
+    text-align: center;
+    color: white;
+    animation: slideUp 0.6s ease-out;
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.pwa-loading-logo {
+    font-size: 80px;
+    margin-bottom: 20px;
+    animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+    0%, 100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+    50% {
+        transform: scale(1.1);
+        opacity: 0.8;
+    }
+}
+
+.pwa-loading-title {
+    font-size: 36px;
+    font-weight: 700;
+    margin-bottom: 30px;
+    letter-spacing: 2px;
+    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.pwa-loading-spinner {
+    position: relative;
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 30px;
+}
+
+.spinner-ring {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border: 3px solid transparent;
+    border-top-color: white;
+    border-radius: 50%;
+    animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
+}
+
+.spinner-ring:nth-child(2) {
+    width: 90%;
+    height: 90%;
+    top: 5%;
+    left: 5%;
+    border-top-color: rgba(255, 255, 255, 0.7);
+    animation-delay: 0.2s;
+}
+
+.spinner-ring:nth-child(3) {
+    width: 80%;
+    height: 80%;
+    top: 10%;
+    left: 10%;
+    border-top-color: rgba(255, 255, 255, 0.5);
+    animation-delay: 0.4s;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.pwa-loading-text {
+    font-size: 16px;
+    font-weight: 400;
+    opacity: 0.9;
+    animation: fadeInOut 2s ease-in-out infinite;
+}
+
+@keyframes fadeInOut {
+    0%, 100% {
+        opacity: 0.6;
+    }
+    50% {
+        opacity: 1;
+    }
+}
+
+/* Mobile optimizations */
+@media (max-width: 768px) {
+    .pwa-loading-logo {
+        font-size: 60px;
+    }
+
+    .pwa-loading-title {
+        font-size: 28px;
+    }
+
+    .pwa-loading-spinner {
+        width: 60px;
+        height: 60px;
+    }
+
+    .pwa-loading-text {
+        font-size: 14px;
+    }
 }
\ No newline at end of file
diff --git a/LittleShop/wwwroot/js/pwa.js b/LittleShop/wwwroot/js/pwa.js
index e9c4404..9ed7993 100644
--- a/LittleShop/wwwroot/js/pwa.js
+++ b/LittleShop/wwwroot/js/pwa.js
@@ -38,6 +38,23 @@ class PWAManager {
 
         // Setup push notifications
         this.setupPushNotifications();
+
+        // Hide loading screen after initialization
+        this.hideLoadingScreen();
+    }
+
+    hideLoadingScreen() {
+        const loadingScreen = document.getElementById('pwa-loading-screen');
+        if (loadingScreen) {
+            // Add fade-out class
+            loadingScreen.classList.add('fade-out');
+
+            // Remove from DOM after animation completes
+            setTimeout(() => {
+                loadingScreen.remove();
+                console.log('PWA: Loading screen removed');
+            }, 500);
+        }
     }
 
     setupInstallPrompt() {
@@ -682,4 +699,17 @@ window.addEventListener('load', () => {
             // Network error, do nothing
         });
     }
-});
\ No newline at end of file
+});
+
+// Fallback: Ensure loading screen is removed after maximum timeout
+// This guarantees the loading screen won't stay visible indefinitely
+setTimeout(() => {
+    const loadingScreen = document.getElementById('pwa-loading-screen');
+    if (loadingScreen) {
+        console.log('PWA: Removing loading screen via fallback timeout');
+        loadingScreen.classList.add('fade-out');
+        setTimeout(() => {
+            loadingScreen.remove();
+        }, 500);
+    }
+}, 5000); // 5 second maximum
\ No newline at end of file
diff --git a/LittleShop/wwwroot/service-worker.js b/LittleShop/wwwroot/service-worker.js
index 606632f..1f139cd 100644
--- a/LittleShop/wwwroot/service-worker.js
+++ b/LittleShop/wwwroot/service-worker.js
@@ -1,5 +1,5 @@
 // Service Worker for LittleShop Admin PWA
-const CACHE_NAME = 'littleshop-admin-v1';
+const CACHE_NAME = 'littleshop-admin-v2';
 const urlsToCache = [
   '/Admin/Dashboard',
   '/manifest.json',
