SilverLABS/littleshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature: Add elegant PWA loading screen

Browse Source 
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>
This commit is contained in:
SysAdmin
2025-10-02 16:39:47 +01:00
parent c3842dc9c6
commit 7f4a502fe1
6 changed files with 197 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
LittleShop/Areas/Admin/Views/Shared/_Layout.cshtml
View File

@@ -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">