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

Fix: Loading screen now shows on every page load

Browse Source 
Problems Fixed:
1. Blank white screen on initial load (loading screen had display:none)
2. Only showed once (sessionStorage.blazorLoaded prevented repeat shows)
3. Fast connections meant users never saw it

Solution:
1. Removed display:none from HTML - screen visible immediately
2. Removed sessionStorage check - shows on every page load
3. Screen visible by default, hides when Blazor.start() completes

Behavior Now:
- Loading screen appears instantly (no blank white screen)
- Shows on every page load (full page refresh)
- Hides when SignalR connection established
- Works correctly with slow/throttled connections

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
SysAdmin 2025-10-06 12:07:40 +01:00
parent 0a08d1a943
commit 5f71f0bb2d
2 changed files with 5 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,7 +41,7 @@
</head> </head>
<body> <body>
<!-- PWA Loading Screen - Managed by blazor-integration.js --> <!-- PWA Loading Screen - Managed by blazor-integration.js -->
<div id="pwa-loading-screen" class="pwa-loading-screen" style="display: none;"> <div id="pwa-loading-screen" class="pwa-loading-screen">
<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>

17
LittleShop/wwwroot/js/blazor-integration.js
View File

@ -2,20 +2,14 @@
document.addEventListener('DOMContentLoaded', async function() { document.addEventListener('DOMContentLoaded', async function() {
console.log('Blazor: DOM Content Loaded'); console.log('Blazor: DOM Content Loaded');
// Show loading screen initially (only on first load) // Loading screen is visible by default (no display:none in HTML)
const isFirstLoad = !sessionStorage.getItem('blazorLoaded'); // This eliminates the blank white screen on initial page load
const loadingScreen = document.getElementById('pwa-loading-screen'); const loadingScreen = document.getElementById('pwa-loading-screen');
console.log('Blazor: Loading screen visible, starting Blazor Server...');
if (isFirstLoad && loadingScreen) {
loadingScreen.style.display = 'flex';
console.log('Blazor: Showing loading screen for first load');
}
// Blazor Server is available on all Admin pages, so always start it // Blazor Server is available on all Admin pages, so always start it
// The blazor.server.js script is already loaded in _Layout.cshtml // The blazor.server.js script is already loaded in _Layout.cshtml
try { try {
console.log('Blazor: Starting Blazor Server...');
// Start Blazor Server with reconnection UI // Start Blazor Server with reconnection UI
await Blazor.start({ await Blazor.start({
reconnectionOptions: { reconnectionOptions: {
@ -34,10 +28,7 @@ document.addEventListener('DOMContentLoaded', async function() {
} }
}); });
console.log('Blazor: Started successfully'); console.log('Blazor: Started successfully, hiding loading screen');
// Mark as loaded and hide loading screen
sessionStorage.setItem('blazorLoaded', 'true');
hideLoadingScreen(); hideLoadingScreen();
} catch (error) { } catch (error) {