Feature: Add elegant PWA loading screen

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>

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
         });
     }
-});
+});
+
+// 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