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

- 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
+1 -1
View File
@@ -24,7 +24,7 @@
<span>배포 또는 서버 재시작 중이면 잠시 후 자동으로 새로고침됩니다.</span>
</div>
</div>
<div id="blazor-loading" class="blazor-loading-overlay">
<div id="blazor-loading" class="blazor-loading-overlay show">
<div class="blazor-loading-spinner">
<div class="spinner"></div>
<p>로드 중...</p>
@@ -1,6 +1,3 @@
@using TaxBaik.Web.Services
@inject IInquiryBrowserClient InquiryClient
<MudSimpleTable Striped="true" Dense="true" Class="admin-table mt-4">
<thead>
<tr>
@@ -37,24 +34,19 @@
</MudSimpleTable>
@code {
[Parameter, EditorRequired]
public IReadOnlyList<Domain.Entities.Inquiry> Inquiries { get; set; } = [];
[Parameter]
public string Status { get; set; } = "";
private List<Domain.Entities.Inquiry> inquiries = [];
private List<Domain.Entities.Inquiry> filteredInquiries = [];
private IReadOnlyList<Domain.Entities.Inquiry> filteredInquiries = [];
protected override async Task OnInitializedAsync()
{
var (items, _) = await InquiryClient.GetPagedAsync(1, 100);
inquiries = items.ToList();
FilterInquiries();
}
private void FilterInquiries()
protected override void OnParametersSet()
{
filteredInquiries = string.IsNullOrEmpty(Status)
? inquiries
: inquiries.Where(x => x.Status == Status).ToList();
? Inquiries
: Inquiries.Where(x => x.Status == Status).ToList();
}
private static string GetPreview(string message)
@@ -77,9 +69,4 @@
};
private static string GetStatusLabel(string status) => InquiryStatusMapper.Labels.GetValueOrDefault(status, status);
protected override async Task OnParametersSetAsync()
{
FilterInquiries();
}
}
@@ -1,4 +1,7 @@
@inherits LayoutComponentBase
@inject NavigationManager Navigation
@inject IJSRuntime JS
@implements IDisposable
<MudLayout Class="admin-shell">
<MudAppBar Elevation="0" Class="admin-topbar">
@@ -73,8 +76,23 @@
private bool expandedCustomerGroup = true;
private bool expandedWebsiteGroup = false;
protected override void OnInitialized()
{
Navigation.LocationChanged += OnLocationChanged;
}
private void OnLocationChanged(object? sender, LocationChangedEventArgs args)
{
_ = InvokeAsync(() => JS.InvokeVoidAsync("taxbaikAdminSession.showLoading"));
}
private void ToggleDrawer()
{
drawerOpen = !drawerOpen;
}
public void Dispose()
{
Navigation.LocationChanged -= OnLocationChanged;
}
}
@@ -1,7 +1,7 @@
@page "/admin/inquiries"
@attribute [Authorize]
@using TaxBaik.Domain.Interfaces
@inject IInquiryRepository InquiryRepository
@using TaxBaik.Web.Services
@inject IInquiryBrowserClient InquiryClient
<PageTitle>문의 관리</PageTitle>
@@ -13,25 +13,44 @@
</div>
</section>
<MudPaper Class="admin-surface" Elevation="0">
<MudTabs Rounded="true" Elevation="0" Class="admin-tabs">
<MudTabPanel Text="전체">
<InquiryTable Status="" />
</MudTabPanel>
<MudTabPanel Text="신규">
<InquiryTable Status="new" />
</MudTabPanel>
<MudTabPanel Text="상담중">
<InquiryTable Status="consulting" />
</MudTabPanel>
<MudTabPanel Text="계약완료">
<InquiryTable Status="contracted" />
</MudTabPanel>
<MudTabPanel Text="거절">
<InquiryTable Status="rejected" />
</MudTabPanel>
<MudTabPanel Text="종결">
<InquiryTable Status="closed" />
</MudTabPanel>
</MudTabs>
</MudPaper>
@if (isLoading)
{
<MudProgressCircular Indeterminate="true" Class="ma-4" />
}
else
{
<MudPaper Class="admin-surface" Elevation="0">
<MudTabs Rounded="true" Elevation="0" Class="admin-tabs">
<MudTabPanel Text="전체">
<InquiryTable Inquiries="allInquiries" Status="" />
</MudTabPanel>
<MudTabPanel Text="신규">
<InquiryTable Inquiries="allInquiries" Status="new" />
</MudTabPanel>
<MudTabPanel Text="상담중">
<InquiryTable Inquiries="allInquiries" Status="consulting" />
</MudTabPanel>
<MudTabPanel Text="계약완료">
<InquiryTable Inquiries="allInquiries" Status="contracted" />
</MudTabPanel>
<MudTabPanel Text="거절">
<InquiryTable Inquiries="allInquiries" Status="rejected" />
</MudTabPanel>
<MudTabPanel Text="종결">
<InquiryTable Inquiries="allInquiries" Status="closed" />
</MudTabPanel>
</MudTabs>
</MudPaper>
}
@code {
private bool isLoading = true;
private IReadOnlyList<Domain.Entities.Inquiry> allInquiries = [];
protected override async Task OnInitializedAsync()
{
var (items, _) = await InquiryClient.GetPagedAsync(1, 200);
allInquiries = items.ToList();
isLoading = false;
}
}