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>
SysAdmin
7f4a502fe1