kjh2064/taxbaik
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

ux: eliminate white-flash on Blazor navigation from Inquiry page
TaxBaik CI/CD / build-and-deploy (push) Successful in 50s
Details

Browse Source 
- App.razor: loading overlay starts with `show` class (visible on cold load)
- admin-session.js: add showLoading()/hideLoading(); MutationObserver detects
  .admin-page-hero / .admin-login-page instead of mud-element count threshold;
  observer restarts on every navigation cycle via LocationChanged
- MainLayout.razor: subscribe to NavigationManager.LocationChanged →
  call JS showLoading() on every route change; implements IDisposable
- InquiryList.razor: remove unused IInquiryRepository injection; load data
  once (GetPagedAsync(1,200)) and pass IReadOnlyList to all six tab panels
- InquiryTable.razor: accept Inquiries parameter; filter synchronously in
  OnParametersSet() — eliminates 6 redundant API calls per page visit
- admin.css: overlay fade-in animation (0.15s); page content fade-in on
  route mount via .admin-page-hero / .admin-login-page animation (0.25s)

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
김재현
2026-06-28 15:29:58 +09:00
parent 27f57ff925
commit fb9c77943f
6 changed files with 144 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TaxBaik.Web/wwwroot/css/admin.css
+17
View File
@@ -1391,6 +1391,23 @@ textarea:focus-visible {
#blazor-loading.show {
display: flex;
animation: overlayFadeIn 0.15s ease-out;
}
@keyframes overlayFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Page content fade-in on each route mount */
.admin-page-hero,
.admin-login-page {
animation: adminPageIn 0.25s ease-out;
}
@keyframes adminPageIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.blazor-loading-overlay {
TaxBaik.Web/wwwroot/js/admin-session.js
+58 -38
View File
@@ -4,6 +4,7 @@ window.taxbaikAdminSession = {
'admin-login-route',
window.location.pathname.toLowerCase().endsWith('/admin/login'));
},
clearAuthToken: function () {
try {
localStorage.removeItem('auth_token');
@@ -11,54 +12,73 @@ window.taxbaikAdminSession = {
// Ignore storage errors; redirect still recovers the session.
}
},
showLoading: function () {
const overlay = document.getElementById('blazor-loading');
if (!overlay) return;
// Start observer FIRST so it catches the mutation that brings new content in.
if (window._taxbaikLoadingObserver) {
window._taxbaikLoadingObserver.disconnect();
}
window._taxbaikLoadingObserver = new MutationObserver(function () {
const pageReady =
document.querySelector('.admin-page-hero') !== null ||
document.querySelector('.admin-login-page') !== null;
if (pageReady) {
window.taxbaikAdminSession.hideLoading();
}
});
window._taxbaikLoadingObserver.observe(document.body, {
childList: true,
subtree: true
});
// Show overlay after observer is active.
overlay.classList.add('show');
// Safety fallback: hide after 3 seconds regardless.
if (window._taxbaikLoadingTimeout) {
clearTimeout(window._taxbaikLoadingTimeout);
}
window._taxbaikLoadingTimeout = setTimeout(function () {
window.taxbaikAdminSession.hideLoading();
}, 3000);
},
hideLoading: function () {
const overlay = document.getElementById('blazor-loading');
if (overlay) {
overlay.classList.remove('show');
}
if (window._taxbaikLoadingTimeout) {
clearTimeout(window._taxbaikLoadingTimeout);
window._taxbaikLoadingTimeout = null;
}
if (window._taxbaikLoadingObserver) {
window._taxbaikLoadingObserver.disconnect();
window._taxbaikLoadingObserver = null;
}
},
watchReconnect: function () {
window.taxbaikAdminSession.syncRouteClass();
window.addEventListener('popstate', window.taxbaikAdminSession.syncRouteClass);
// Hide loading indicator after Blazor initializes
const loadingOverlay = document.getElementById('blazor-loading');
if (loadingOverlay) {
const hideLoading = () => {
if (loadingOverlay.classList.contains('show')) {
loadingOverlay.classList.remove('show');
}
};
// Method 1: Hide after 3 seconds (guaranteed timeout)
setTimeout(hideLoading, 3000);
// Method 2: Hide when Blazor components appear (faster if available)
const observer = new MutationObserver(() => {
const mudElements = document.querySelectorAll('[class*="mud-"]').length;
if (mudElements > 10) {
hideLoading();
observer.disconnect();
}
});
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: true
});
// Method 3: Hide when page is interactive
document.addEventListener('readystatechange', () => {
if (document.readyState === 'interactive' || document.readyState === 'complete') {
setTimeout(hideLoading, 500);
}
});
}
// Show loading on initial page load — overlay has 'show' from HTML,
// but we still need to set up the observer to detect when to hide it.
window.taxbaikAdminSession.showLoading();
const modal = document.getElementById('components-reconnect-modal');
if (!modal) {
return;
}
if (!modal) return;
const reloadOnRejectedCircuit = () => {
const reloadOnRejectedCircuit = function () {
const className = modal.className || '';
if (className.includes('components-reconnect-failed') ||
className.includes('components-reconnect-rejected')) {
window.setTimeout(() => window.location.reload(), 1500);
window.setTimeout(function () { window.location.reload(); }, 1500);
}
};