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

Fix: PWA loading screen now only shows on app startup, not on every navigation

Browse Source 
Changed splash screen to use sessionStorage to detect first load vs navigation.
- Loading screen hidden by default, only shown on initial app load
- Uses sessionStorage flag to persist across navigation within same session
- Prevents jarring loading screen on every page navigation
- Updated hideLoadingScreen to use display:none instead of remove()

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
SysAdmin 2025-10-03 12:14:48 +01:00
parent 7f4a502fe1
commit 74e6b91cc2
2 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,8 +40,8 @@
@await RenderSectionAsync("Head", required: false) @await RenderSectionAsync("Head", required: false)
</head> </head>
<body> <body>
<!-- PWA Loading Screen --> <!-- PWA Loading Screen - Only on first load -->
<div id="pwa-loading-screen" class="pwa-loading-screen"> <div id="pwa-loading-screen" class="pwa-loading-screen" style="display: none;">
<div class="pwa-loading-content"> <div class="pwa-loading-content">
<div class="pwa-loading-logo"> <div class="pwa-loading-logo">
<i class="fas fa-store"></i> <i class="fas fa-store"></i>
@ -56,6 +56,21 @@
</div> </div>
</div> </div>
<script>
// Show loading screen only on initial app load, not on navigation
(function() {
const isFirstLoad = !sessionStorage.getItem('appLoaded');
if (isFirstLoad) {
const loadingScreen = document.getElementById('pwa-loading-screen');
if (loadingScreen) {
loadingScreen.style.display = 'flex';
}
sessionStorage.setItem('appLoaded', 'true');
}
})();
</script>
<header> <header>
<nav class="navbar navbar-expand-sm navbar-light bg-white"> <nav class="navbar navbar-expand-sm navbar-light bg-white">
<div class="container-fluid"> <div class="container-fluid">

16
LittleShop/wwwroot/js/pwa.js
View File

@ -45,14 +45,14 @@ class PWAManager {
hideLoadingScreen() { hideLoadingScreen() {
const loadingScreen = document.getElementById('pwa-loading-screen'); const loadingScreen = document.getElementById('pwa-loading-screen');
if (loadingScreen) { if (loadingScreen && loadingScreen.style.display !== 'none') {
// Add fade-out class // Add fade-out class
loadingScreen.classList.add('fade-out'); loadingScreen.classList.add('fade-out');
// Remove from DOM after animation completes // Hide after animation completes (don't remove from DOM to avoid layout issues)
setTimeout(() => { setTimeout(() => {
loadingScreen.remove(); loadingScreen.style.display = 'none';
console.log('PWA: Loading screen removed'); console.log('PWA: Loading screen hidden');
}, 500); }, 500);
} }
} }
@ -701,15 +701,15 @@ window.addEventListener('load', () => {
} }
}); });
// Fallback: Ensure loading screen is removed after maximum timeout // Fallback: Ensure loading screen is hidden after maximum timeout
// This guarantees the loading screen won't stay visible indefinitely // This guarantees the loading screen won't stay visible indefinitely
setTimeout(() => { setTimeout(() => {
const loadingScreen = document.getElementById('pwa-loading-screen'); const loadingScreen = document.getElementById('pwa-loading-screen');
if (loadingScreen) { if (loadingScreen && loadingScreen.style.display !== 'none') {
console.log('PWA: Removing loading screen via fallback timeout'); console.log('PWA: Hiding loading screen via fallback timeout');
loadingScreen.classList.add('fade-out'); loadingScreen.classList.add('fade-out');
setTimeout(() => { setTimeout(() => {
loadingScreen.remove(); loadingScreen.style.display = 'none';
}, 500); }, 500);
} }
}, 5000); // 5 second maximum }, 5000); // 5 second maximum