feat: emit onRendered event when location and status are settled (#15)

Author: nartc

package-lock.json

@@ -96,6 +96,19 @@ export class NgRouter<
   routerState = linkedSignal(() => this.state);
   isTransitioning = signal(false);
 
+  private status = computed(() => this.routerState().status);
+  private prevStatus = linkedSignal<'pending' | 'idle', 'pending' | 'idle'>({
+    source: this.status,
+    computation: (src, prev) => prev?.source ?? src,
+  });
+  private location = computed(() => this.routerState().location);
+  private prevLocation = linkedSignal<
+    ReturnType<typeof this.location>,
+    ReturnType<typeof this.location> | undefined
+  >({
+    source: this.location,
+    computation: (src, prev) => prev?.source,
+  });
   private matches = computed(() => this.routerState().matches);
 
   hasPendingMatches = computed(() =>
@@ -145,6 +158,20 @@ export class NgRouter<
       };
     }
 
+    effect(() => {
+      const [prevLocation, location] = [this.prevLocation(), this.location()];
+      if (prevLocation && location.state.key === prevLocation?.state.key) {
+        return;
+      }
+
+      const [prevStatus, status] = [this.prevStatus(), this.status()];
+
+      // when the router transitions from non-idle to idle, we emit a `onRendered` event
+      if (prevStatus !== 'idle' && status === 'idle') {
+        this.emit({ type: 'onRendered', ...getLocationChangeInfo(this.state) });
+      }
+    });
+
     effect((onCleanup) => {
       const unsub = this.__store.subscribe(() => {
         this.routerState.set(this.state);

projects/router/src/lib/create-router.ts

@@ -248,7 +248,7 @@ export class Link {
 
   private preloadTimeout: ReturnType<typeof setTimeout> | null = null;
   protected handleMouseEnter(event: MouseEvent) {
-    if (this.disabled() || !this.preload()) return;
+    if (this.disabled() || !this.preload() || this.isActive()) return;
 
     this.preloadTimeout = setTimeout(() => {
       this.preloadTimeout = null;

projects/router/src/lib/link.ts

@@ -63,8 +63,11 @@ export function provideRouter(
     },
     provideAppInitializer(() => {
       const router = injectRouter();
-      router.load().then(() => {
-        console.log('initial router load');
+      router.load({ sync: true }).then(() => {
+        // upon initial load, we'll set the router state to idle if it's not already
+        if (router.state.status !== 'idle') {
+          router.__store.setState((s) => ({ ...s, status: 'idle' }));
+        }
       });
       return Promise.resolve();
     }),

projects/router/src/lib/router.ts

@@ -12,8 +12,8 @@ export const AboutRoute = createRoute({
   pendingComponent: () => Spinner,
   loader: async () => {
     const todosService = inject(TodosClient);
-    await new Promise((resolve) => setTimeout(resolve, 5_000));
     const todos = await firstValueFrom(todosService.getTodo(1));
+    await new Promise((resolve) => setTimeout(resolve, 5_000));
     return { todos };
   },
 }).lazy(() => import('./about').then((m) => m.LazyAboutRoute));

src/app/about/about.route.ts

@@ -12,7 +12,7 @@ import {
     <h1>Welcome to {{ title }}!</h1>
     <a link="/" class="chau">Home</a>
     |
-    <a link="/about">About</a>
+    <a [link]="{ to: '/about', preload: 'intent' }">About</a>
     |
     <a [link]="{ to: '/parent' }" [linkActive]="{ exact: false }">Parent 1</a>
     |