feat(transition): adds delay support to loading views

Author: dvcol

src/lib/components/RouteComponent.svelte

@@ -56,16 +56,28 @@
   // Generate a unique identifier for each loading state, to prevent cancelled navigations from updating the view
   const change: ViewChangeEvent = $derived(new ViewChangeEvent({ view: { id: view.id, name: view.name }, route }));
 
-  // Extract routing state
-  let routing: boolean | undefined = $state();
+  // Debounce routing state
+  let isRouting: boolean | undefined = $state();
   const setRouting = debounce((val: boolean) => {
-    routing = val;
-    return routing;
-  }, 0);
-  $effect(() => {
+    isRouting = val;
+    return isRouting;
+  }, typeof transition?.delay === 'number' ? transition?.delay : transition?.delay?.routing ?? 0);
+
+  $effect.pre(() => {
     setRouting(!!router?.routing?.active);
   });
 
+  // Debounce loading state
+  let isLoading: boolean | undefined = $state();
+  const setLoading = debounce((val: boolean) => {
+    isLoading = val;
+    return isLoading;
+  }, typeof transition?.delay === 'number' ? transition?.delay : transition?.delay?.loading ?? 0);
+
+  $effect.pre(() => {
+    setLoading(!!view.loading);
+  });
+
   // Delay properties update until component is resolved
   let _properties: ComponentProps | undefined = $state();
 
@@ -74,25 +86,25 @@
 
   // Routed component to be rendered (loading, error, or resolved component)
   const routedComponent = $derived.by<IComponentOrSnippet | undefined>(() => {
-    if (routing && routingSnippet) return routingSnippet;
-    else if (view.loading && loading) return loading;
-    else if (view.loading && loadingSnippet) return loadingSnippet;
+    if (isRouting && routingSnippet) return routingSnippet;
+    else if (isLoading && loading) return loading;
+    else if (isLoading && loadingSnippet) return loadingSnippet;
     else if (view.error && error) return error;
     else if (view.error && errorSnippet) return errorSnippet;
     else if (resolvedComponent) return resolvedComponent;
   });
 
   // Routed snippet properties
   const routedProps = $derived.by(() => {
-    if (routedComponent === errorSnippet) return view.error;
-    if (routedComponent === routingSnippet) return router.routing;
-    if (routedComponent === loadingSnippet) return route;
+    if (routingSnippet === routedComponent) return router.routing;
+    if ([loadingSnippet, loading].includes(routedComponent)) return route;
+    if ([errorSnippet, error].includes(routedComponent)) return view.error;
     return _properties;
   });
 
   // Trigger transition on route change or component update
   const transitionKey = $derived.by(() => {
-    const _keys = [routedComponent];
+    const _keys: any[] = [routedComponent];
     if (transition?.updateOnPropsChange) _keys.push(_properties);
     return _keys;
   });
@@ -108,6 +120,7 @@
       },
       onLoading: () => {
         if (change.uuid !== _uuid) return;
+        if (loading || loadingSnippet) resolvedComponent = undefined;
         return untrack(() => view.load());
       },
       onLoaded: (_component?: AnyComponent | AnySnippet) => {
@@ -120,6 +133,7 @@
       onError: (err: unknown) => {
         if (change.uuid !== _uuid) return;
         if (force) resolvedID = _uuid;
+        if (error || errorSnippet) resolvedComponent = undefined;
         return untrack(() => view.fail(err));
       },
     };

src/lib/models/component.model.ts

@@ -75,6 +75,15 @@ export interface TransitionProps<
    * @see [view transition api](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
    */
   viewTransitionName?: boolean | string;
+  /**
+   * Optional delay before displaying routing and loading views.
+   *
+   * @default 0
+   */
+  delay?: number | {
+    routing?: number;
+    loading?: number;
+  };
 }
 
 export interface RouteContainerProps<Name extends RouteName = any> {

test/components/components.test.ts

@@ -102,6 +102,9 @@ describe('routerView', () => {
         render(component, { router });
         await router.push({ path: '/loading' });
 
+        // Flush the microtask queue to ensure the loading component is rendered
+        await wait(0);
+
         const loading = screen.getByTestId('loading-component');
         expect(loading).toBeDefined();
 
@@ -121,6 +124,9 @@ describe('routerView', () => {
         render(component, { router });
         await router.push({ path: '/default-loading' });
 
+        // Flush the microtask queue to ensure the loading component is rendered
+        await wait(0);
+
         const loading = screen.getByTestId('default-loading');
         expect(loading).toBeDefined();
 
@@ -578,6 +584,8 @@ describe('routerView', () => {
       const errorComponent = screen.getByTestId('default-error');
       expect(errorComponent).toBeDefined();
 
+      console.info(errorComponent.innerHTML);
+
       const message = errorComponent.querySelector('p[data-testid="error-message"]');
       expect(message).toBeDefined();
       expect(message?.textContent).toBe('Loading error');
@@ -598,6 +606,9 @@ describe('routerView', () => {
       });
       await router.push({ path: partialRoute.path });
 
+      // Flush the microtask queue to ensure the loading component is rendered
+      await wait(0);
+
       const loading = screen.getByTestId('loading-component');
       expect(loading).toBeDefined();
 
@@ -623,6 +634,9 @@ describe('routerView', () => {
       });
       await router.push({ path: partialRoute.path });
 
+      // Flush the microtask queue to ensure the loading component is rendered
+      await wait(0);
+
       const loading = screen.getByTestId('default-loading');
       expect(loading).toBeDefined();
 

test/components/stub/mocks.ts

@@ -1,7 +1,7 @@
 import { vi } from 'vitest';
 
 export const LifeCycle: Record<string, { onMounted: () => unknown; onDestroyed: () => unknown }> = {
-  Hello: { onMounted: vi.fn(), onDestroyed: vi.fn() },
-  Goodbye: { onMounted: vi.fn(), onDestroyed: vi.fn() },
-  Error: { onMounted: vi.fn(), onDestroyed: vi.fn() },
+  Hello: { onMounted: vi.fn().mockImplementation(() => console.info('Mounted Hello Component !')), onDestroyed: vi.fn().mockImplementation(() => console.info('Destroyed Hello Component !')) },
+  Goodbye: { onMounted: vi.fn().mockImplementation(() => console.info('Mounted Goodbye Component !')), onDestroyed: vi.fn().mockImplementation(() => console.info('Destroyed Goodbye Component !')) },
+  Error: { onMounted: vi.fn().mockImplementation(() => console.info('Mounted Error Component !')), onDestroyed: vi.fn().mockImplementation(() => console.info('Destroyed Error Component !')) },
 };