SysAdmin
5f71f0bb2d
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>
94 lines
3.3 KiB
JavaScript
94 lines
3.3 KiB
JavaScript
// Blazor Server Integration Script
|
|
document.addEventListener('DOMContentLoaded', async function() {
|
|
console.log('Blazor: DOM Content Loaded');
|
|
|
|
// Loading screen is visible by default (no display:none in HTML)
|
|
// This eliminates the blank white screen on initial page load
|
|
const loadingScreen = document.getElementById('pwa-loading-screen');
|
|
console.log('Blazor: Loading screen visible, starting Blazor Server...');
|
|
|
|
// Blazor Server is available on all Admin pages, so always start it
|
|
// The blazor.server.js script is already loaded in _Layout.cshtml
|
|
try {
|
|
// Start Blazor Server with reconnection UI
|
|
await Blazor.start({
|
|
reconnectionOptions: {
|
|
maxRetries: 8,
|
|
retryIntervalMilliseconds: 2000
|
|
},
|
|
reconnectionHandler: {
|
|
onConnectionDown: () => {
|
|
console.log('Blazor: Connection lost, attempting to reconnect...');
|
|
showReconnectingUI();
|
|
},
|
|
onConnectionUp: () => {
|
|
console.log('Blazor: Reconnected successfully');
|
|
hideReconnectingUI();
|
|
}
|
|
}
|
|
});
|
|
|
|
console.log('Blazor: Started successfully, hiding loading screen');
|
|
hideLoadingScreen();
|
|
|
|
} catch (error) {
|
|
console.error('Blazor: Failed to start:', error);
|
|
hideLoadingScreen();
|
|
}
|
|
});
|
|
|
|
// Loading screen management
|
|
function hideLoadingScreen() {
|
|
const loadingScreen = document.getElementById('pwa-loading-screen');
|
|
if (loadingScreen && loadingScreen.style.display !== 'none') {
|
|
console.log('Blazor: Hiding loading screen');
|
|
loadingScreen.classList.add('fade-out');
|
|
|
|
setTimeout(() => {
|
|
loadingScreen.style.display = 'none';
|
|
}, 500);
|
|
}
|
|
}
|
|
|
|
// Reconnection UI for Blazor Server
|
|
function showReconnectingUI() {
|
|
let reconnectUI = document.getElementById('blazor-reconnect-ui');
|
|
|
|
if (!reconnectUI) {
|
|
reconnectUI = document.createElement('div');
|
|
reconnectUI.id = 'blazor-reconnect-ui';
|
|
reconnectUI.className = 'alert alert-warning';
|
|
reconnectUI.style.cssText = `
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 9999;
|
|
min-width: 300px;
|
|
text-align: center;
|
|
`;
|
|
reconnectUI.innerHTML = `
|
|
<i class="fas fa-exclamation-triangle me-2"></i>
|
|
<strong>Connection lost</strong><br>
|
|
<small>Attempting to reconnect...</small>
|
|
`;
|
|
document.body.appendChild(reconnectUI);
|
|
}
|
|
}
|
|
|
|
function hideReconnectingUI() {
|
|
const reconnectUI = document.getElementById('blazor-reconnect-ui');
|
|
if (reconnectUI) {
|
|
reconnectUI.remove();
|
|
}
|
|
}
|
|
|
|
// Helper function to navigate to Blazor components from MVC
|
|
window.navigateToBlazor = function(componentPath) {
|
|
window.location.href = '/blazor#' + componentPath;
|
|
};
|
|
|
|
// Export functions for use by other scripts
|
|
window.hideBlazorLoadingScreen = hideLoadingScreen;
|
|
window.showBlazorReconnectingUI = showReconnectingUI;
|
|
window.hideBlazorReconnectingUI = hideReconnectingUI; |