Improved piral-ng URL dispatching

smapiot · Aug 25, 2023 · 486ba13 · 486ba13
1 parent 788b1f1
commit 486ba13
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## 1.2.0 (tbd)
 
 - Fixed issue with `loader-utils` version
+- Fixed issue with potential URL flickering using `piral-ng`
 - Fixed build issue in codegen of `piral-core` on Windows (#619)
 - Updated `importmap` with `exclude` key allowing exclusions
 - Added support for `dependencySymbols` in `piral-blazor`

diff --git a/src/converters/piral-ng/src/RoutingService.ts b/src/converters/piral-ng/src/RoutingService.ts
@@ -64,6 +64,10 @@ export class RoutingService implements OnDestroy {
       const skipIds: Array<number> = [];
       const nav = this.context.navigation;
 
+      const queueNavigation = (url: string) => {
+        window.requestAnimationFrame(() => nav.push(url));
+      };
+
       this.dispose = nav.listen(({ location }) => {
         const path = location.pathname;
 
@@ -84,7 +88,7 @@ export class RoutingService implements OnDestroy {
           }
 
           if (routerUrl !== locationUrl) {
-            nav.push(routerUrl);
+            queueNavigation(routerUrl);
           }
         } else if (e.type === 0 && skipNavigation) {
           skipIds.push(e.id);
@@ -97,7 +101,7 @@ export class RoutingService implements OnDestroy {
             const routerUrl = e.routerEvent.url;
 
             if (routerUrl !== locationUrl) {
-              nav.push(routerUrl);
+              queueNavigation(routerUrl);
             }
           } else {
             skipIds.splice(index, 1);