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

Fix: Blazor Server loading screen now works correctly

Browse Source 
Problem:
- Loading screen was getting stuck and not hiding properly
- Conflicting logic between pwa.js and inline scripts
- Blazor Server lifecycle not properly integrated with loading screen

Solution (Meziantou-inspired approach for Blazor Server):
1. **blazor-integration.js** - Now manages loading screen lifecycle:
   - Shows loading screen only on first load (sessionStorage check)
   - Hides screen when Blazor.start() promise resolves (SignalR connected)
   - Added reconnection UI for Blazor Server disconnections
   - Proper error handling if Blazor fails to start

2. **_Layout.cshtml** - Simplified loading screen management:
   - Removed inline script that was conflicting
   - Moved blazor-integration.js before pwa.js (load order critical)
   - Loading screen now controlled by Blazor lifecycle

3. **pwa.js** - Removed conflicting logic:
   - Removed hideLoadingScreen() method
   - Removed 5-second fallback timeout
   - PWA initialization no longer interferes with Blazor loading

Key Differences from WebAssembly Approach:
- WASM: Downloads .NET runtime + shows download progress
- Server: Establishes SignalR connection + shows spinner
- Loading screen hides when SignalR connection is ready

🤖 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 11:45:08 +01:00
parent dd494603f5
commit db2443c7ac
3 changed files with 107 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -40,7 +40,7 @@
@await RenderSectionAsync("Head", required: false)
</head>
<body>
<!-- PWA Loading Screen - Only on first load -->
<!-- PWA Loading Screen - Managed by blazor-integration.js -->
<div id="pwa-loading-screen" class="pwa-loading-screen" style="display: none;">
<div class="pwa-loading-content">
<div class="pwa-loading-logo">
@@ -56,21 +56,6 @@
</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">
@@ -170,10 +155,11 @@
<script src="/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/_framework/blazor.server.js" autostart="false"></script>
<script src="/_content/Radzen.Blazor/Radzen.Blazor.js"></script>
<!-- Blazor integration MUST load before PWA to control loading screen -->
<script src="/js/blazor-integration.js"></script>
<script src="/js/pwa.js"></script>
<script src="/js/notifications.js"></script>
<script src="/js/modern-mobile.js"></script>
<script src="/js/blazor-integration.js"></script>
@await RenderSectionAsync("Scripts", required: false)
<!-- Mobile Bottom Navigation -->
<nav class="mobile-bottom-nav">