diff --git a/TaxBaik.Web/wwwroot/js/admin-session.js b/TaxBaik.Web/wwwroot/js/admin-session.js index 43ae8ba..9df2e4f 100644 --- a/TaxBaik.Web/wwwroot/js/admin-session.js +++ b/TaxBaik.Web/wwwroot/js/admin-session.js @@ -15,16 +15,48 @@ window.taxbaikAdminSession = { window.taxbaikAdminSession.syncRouteClass(); window.addEventListener('popstate', window.taxbaikAdminSession.syncRouteClass); - // Show loading indicator on page load (hide when Blazor circuit connects) + // Show loading indicator on page load, hide when content renders const loadingOverlay = document.getElementById('blazor-loading'); if (loadingOverlay) { - loadingOverlay.classList.add('show'); - // Hide loading when Blazor is ready - Blazor.start().then(() => { - if (loadingOverlay) { - loadingOverlay.classList.remove('show'); + // Hide loading when page is fully interactive + // Watch for Blazor components to render + const hideLoading = () => { + loadingOverlay.classList.remove('show'); + document.removeEventListener('blazor:ready', hideLoading); + observer.disconnect(); + }; + + // Hide on Blazor ready event + document.addEventListener('blazor:ready', hideLoading); + + // Also hide after DOM content loaded + small delay + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', () => { + setTimeout(() => { + if (loadingOverlay.classList.contains('show')) { + hideLoading(); + } + }, 500); + }); + } else { + setTimeout(() => { + if (loadingOverlay.classList.contains('show')) { + hideLoading(); + } + }, 500); + } + + // Watch for interactive elements to appear + const observer = new MutationObserver(() => { + const mudElements = document.querySelectorAll('[class*="mud-"]').length; + if (mudElements > 20 && loadingOverlay.classList.contains('show')) { + hideLoading(); } }); + observer.observe(document.body, { + childList: true, + subtree: true + }); } const modal = document.getElementById('components-reconnect-modal');