littleshop/LittleShop/wwwroot/js/blazor-integration.js

// 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');
    }

    // Check if we're on a page that should use Blazor
    const blazorContainers = document.querySelectorAll('[data-blazor-component]');

    if (blazorContainers.length > 0 || window.location.pathname.includes('/Admin/Products/Blazor') || window.location.pathname.includes('/blazor')) {
        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();
        }
    } else {
        // Not a Blazor page, hide loading screen immediately
        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;