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)
</head>
<body>
<!-- PWA Loading Screen -->
<div id="pwa-loading-screen" class="pwa-loading-screen">
<!-- PWA Loading Screen - Only on first load -->
<div id="pwa-loading-screen" class="pwa-loading-screen" style="display: none;">
<div class="pwa-loading-content">
<div class="pwa-loading-logo">
<i class="fas fa-store"></i>
@ -56,6 +56,21 @@
</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>
<nav class="navbar navbar-expand-sm navbar-light bg-white">
<div class="container-fluid">

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

@ -45,14 +45,14 @@ class PWAManager {
hideLoadingScreen() {
const loadingScreen = document.getElementById('pwa-loading-screen');
if (loadingScreen) {
if (loadingScreen && loadingScreen.style.display !== 'none') {
// Add fade-out class
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(() => {
loadingScreen.remove();
console.log('PWA: Loading screen removed');
loadingScreen.style.display = 'none';
console.log('PWA: Loading screen hidden');
}, 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
setTimeout(() => {
const loadingScreen = document.getElementById('pwa-loading-screen');
if (loadingScreen) {
console.log('PWA: Removing loading screen via fallback timeout');
if (loadingScreen && loadingScreen.style.display !== 'none') {
console.log('PWA: Hiding loading screen via fallback timeout');
loadingScreen.classList.add('fade-out');
setTimeout(() => {
loadingScreen.remove();
loadingScreen.style.display = 'none';
}, 500);
}
}, 5000); // 5 second maximum