Skip to content

Commit 4039221

Browse files
author
CIS Guru
committed
fix: Prevent brand theme flicker when clicking same NavLink repeatedly
Two issues resolved: 1. NavMenu.razor: Guard OnLocationChanged to only run when URL actually changes - Prevents unnecessary theme re-application on same-link clicks - Eliminates redundant StateHasChanged calls 2. theme.js: Optimize MutationObserver to only watch theme attributes - Changed from observing entire document.body with childList+subtree - Now only observes documentElement with attributeFilter - Prevents observer from firing on every Blazor NavLink re-render - Eliminates unnecessary reflow operations that caused visual flicker The combination of these fixes ensures clicking the same NavLink multiple times no longer causes the brand theme to temporarily switch to Bootstrap.
1 parent 8aad539 commit 4039221

2 files changed

Lines changed: 11 additions & 5 deletions

File tree

3-Aquiis.UI.Shared/wwwroot/js/theme.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -115,9 +115,9 @@ if (typeof localStorage !== "undefined") {
115115

116116
// Start observing after a short delay to let Blazor initialize
117117
setTimeout(() => {
118-
observer.observe(document.body, {
119-
childList: true,
120-
subtree: true,
118+
observer.observe(document.documentElement, {
119+
attributes: true,
120+
attributeFilter: ["data-bs-theme", "data-brand-theme"],
121121
});
122122
}, 1000);
123123

4-Aquiis.SimpleStart/Shared/Layout/NavMenu.razor

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
2121

22-
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
22+
<div class="nav-scrollable">
2323
<nav class="nav flex-column">
2424

2525
<OrganizationAuthorizeView Roles="Owner,Administrator">
@@ -336,7 +336,13 @@
336336

337337
private async void OnLocationChanged(object? sender, LocationChangedEventArgs e)
338338
{
339-
currentUrl = NavigationManager.ToBaseRelativePath(e.Location);
339+
var newUrl = NavigationManager.ToBaseRelativePath(e.Location);
340+
341+
// Only update if URL actually changed (prevents visual glitch on same-link clicks)
342+
if (newUrl == currentUrl)
343+
return;
344+
345+
currentUrl = newUrl;
340346

341347
// Re-apply current theme and brand theme after navigation
342348
try

0 commit comments

Comments
 (0)