SysAdmin
0a08d1a943
Problem: - Loading screen was hiding immediately without waiting for Blazor - Page detection logic was too restrictive (only /blazor paths) - Most admin pages don't have Blazor components, so screen hid instantly Solution: - Blazor Server is loaded on ALL admin pages via _Layout.cshtml - Removed restrictive path checking (was checking for /blazor or components) - Now always calls Blazor.start() and waits for SignalR connection - Loading screen properly shows while SignalR establishes connection Expected behavior: - First load: Screen shows → Blazor connects → Screen fades out - Console: "Starting Blazor Server..." → "Started successfully" → "Hiding" 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
103 lines
3.5 KiB
JavaScript
103 lines
3.5 KiB
JavaScript
// Blazor Server Integration Script
|
|
document.addEventListener('DOMContentLoaded', async function() {
|
|
console.log('Blazor: DOM Content Loaded');
|
|
|
|
// Show loading screen initially (only on first load)
|
|
const isFirstLoad = !sessionStorage.getItem('blazorLoaded');
|
|
const loadingScreen = document.getElementById('pwa-loading-screen');
|
|
|
|
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
|
|
// The blazor.server.js script is already loaded in _Layout.cshtml
|
|
try {
|
|
console.log('Blazor: Starting Blazor Server...');
|
|
|
|
// 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');
|
|
|
|
// Mark as loaded and hide loading screen
|
|
sessionStorage.setItem('blazorLoaded', 'true');
|
|
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; |