Tune persist scroll feature of BitAppShell (#9925)

src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.razor.cs

@@ -10,9 +10,11 @@ namespace Bit.BlazorUI;
 public partial class BitAppShell : BitComponentBase, IAsyncDisposable
 {
     private bool _disposed;
+    private bool _locationChanged;
     private ElementReference _containerRef = default!;
 
 
+
     [Inject] private IJSRuntime _js { get; set; } = default!;
     [Inject] private NavigationManager _navManager { get; set; } = default!;
 
@@ -88,15 +90,22 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             await _js.BitAppShellInitScroll(_containerRef, _navManager.Uri);
         }
-    }
 
+        if (_locationChanged)
+        {
+            _locationChanged = false;
+            await _js.BitAppShellAfterRenderScroll(_navManager.Uri);
+        }
+    }
 
 
+
     private void LocationChanged(object? sender, LocationChangedEventArgs args)
     {
         if (PersistScroll)
         {
-            _ = _js.BitAppShellNavigateScroll(_navManager.Uri);
+            _locationChanged = true;
+            _ = _js.BitAppShellLocationChangedScroll(_navManager.Uri);
         }
         else if (AutoGoToTop)
         {

src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.ts

@@ -6,16 +6,20 @@ namespace BitBlazorUI {
 
         public static initScroll(container: HTMLElement, url: string) {
             AppShell._container = container;
-            AppShell.navigateScroll(url);
+            AppShell._currentUrl = url;
+            AppShell._scrolls[url] = 0;
             AppShell.addScroll();
         }
 
-        public static navigateScroll(url: string) {
+        public static locationChangedScroll(url: string) {
+            AppShell.removeScroll();
+        }
+
+        public static afterRenderScroll(url: string) {
             AppShell._currentUrl = url;
             AppShell._scrolls[url] = AppShell._scrolls[url] || 0;
-            AppShell.removeScroll();
             AppShell._container.scrollTo({ top: AppShell._scrolls[url], behavior: 'instant' });
-            setTimeout(AppShell.addScroll, 13);
+            AppShell.addScroll();
         }
 
         public static disposeScroll() {
@@ -24,7 +28,7 @@ namespace BitBlazorUI {
 
         private static addScroll() {
             AppShell._container.addEventListener('scroll', AppShell.onScroll);
-}
+        }
 
         private static removeScroll() {
             AppShell._container.removeEventListener('scroll', AppShell.onScroll);

src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShellJsRuntimeExtensions.cs

@@ -9,9 +9,14 @@ internal static ValueTask BitAppShellInitScroll(this IJSRuntime jsRuntime, Eleme
         return jsRuntime.InvokeVoid("BitBlazorUI.AppShell.initScroll", container, url);
     }
 
-    internal static ValueTask BitAppShellNavigateScroll(this IJSRuntime jsRuntime, string url)
+    internal static ValueTask BitAppShellLocationChangedScroll(this IJSRuntime jsRuntime, string url)
     {
-        return jsRuntime.InvokeVoid("BitBlazorUI.AppShell.navigateScroll", url);
+        return jsRuntime.InvokeVoid("BitBlazorUI.AppShell.locationChangedScroll", url);
+    }
+
+    internal static ValueTask BitAppShellAfterRenderScroll(this IJSRuntime jsRuntime, string url)
+    {
+        return jsRuntime.InvokeVoid("BitBlazorUI.AppShell.afterRenderScroll", url);
     }
 
     internal static ValueTask BitAppShellDisposeScroll(this IJSRuntime jsRuntime)

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.ts

@@ -5,7 +5,7 @@ function scrollToElement(targetElementId: string) {
 
     if (element != null) {
         element.scrollIntoView({
-            behavior: "smooth",
+            behavior: "instant",
             block: "start",
             inline: "nearest"
         });