Add configurable navigation delay + onRouteChangeStart subscription

Author: Alexandre Lotte

src/components/Link.ts

@@ -62,7 +62,7 @@ const Link = ({ href, ...rest }: LinkProps, children) => ({
     }
     const DumbNavigate = (state: State, ev) => {
       ev.preventDefault();
-      return [state, navigate({ to: href })];
+      return [state, navigate({ to: href, delay: options.navigationDelay })];
     };
     return h(
       "a",
@@ -87,10 +87,10 @@ const Link = ({ href, ...rest }: LinkProps, children) => ({
     ev.preventDefault();
     const action = PreloadPage(state, href);
     if (Array.isArray(action)) {
-      action.push(navigate({ to: href }));
+      action.push(navigate({ to: href, delay: options.navigationDelay }));
       return action;
     }
-    return [action, navigate({ to: href })];
+    return [action, navigate({ to: href, delay: options.navigationDelay })];
   };
 
   const PreloadPageHandler = (state: State, _ev) => {

src/effects/navigate.ts

@@ -1,20 +1,24 @@
 interface NavigateArgs {
   to: string;
+  delay?: number;
 }
 
 /**
  * Trigger a page navigation
  */
-const navigateRunner = (dispatch, { to }: NavigateArgs) => {
-  // Internal links
-  if (to.startsWith('/')) {
-    history.pushState(null, '', to)
-    dispatchEvent(new CustomEvent("pushstate"))
-  } else {
+const navigateRunner = (dispatch, { to, delay = 0 }: NavigateArgs) => {
+  dispatchEvent(new CustomEvent("navigationstart"))
+  setTimeout(() => {
+    // Internal links
+    if (to.startsWith('/')) {
+      history.pushState(null, '', to)
+      dispatchEvent(new CustomEvent("pushstate"))
+    } else {
 
-    // Handle external links
-    window.location.href = to
-  }
+      // Handle external links
+      window.location.href = to
+    }
+  }, delay)
 }
 
 const navigate = (args: NavigateArgs) => [navigateRunner, args]

src/index.ts

@@ -3,6 +3,7 @@ export { default as Link } from './components/Link'
 export { default as Router } from './components/Router'
 export { default as navigate } from './effects/navigate'
 export { default as loadStatic } from './effects/loadStatic'
+export { default as onRouteChangeStart } from './subscriptions/onRouteChangeStart'
 export { default as onRouteChanged } from './subscriptions/onRouteChanged'
 export { default as htmlToVdom } from './utils/htmlToVdom'
 export { default as isPrerendering } from './utils/isPrerendering'

src/subscriptions/onRouteChangeStart.ts

@@ -0,0 +1,23 @@
+import { Action } from 'hyperapp'
+
+interface OnRouteChangeStartArgs {
+  action: Action<any>;
+}
+
+/**
+ * Every time the browser's location changes,
+ * trigger the given action with the new location as params
+ */
+const onRouteChangeStartRunner = (dispatch, { action }: OnRouteChangeStartArgs) => {
+  const handleLocationChange = () => {
+    dispatch(action)
+  }
+  addEventListener('navigationstart', handleLocationChange)
+  return () => {
+    removeEventListener('navigationstart', handleLocationChange)
+  }
+}
+
+const onRouteChangeStart = (args: OnRouteChangeStartArgs) => [onRouteChangeStartRunner, args]
+
+export default onRouteChangeStart

src/types.ts

@@ -6,6 +6,7 @@ export interface Options {
   notFound?: (state: State) => any
   fastClicks?: boolean
   eagerLoad?: boolean
+  navigationDelay?: number
 }
 
 export interface Config {