Add a top loading bar when redirecting page out 0.2s

Author: ije

framework/core/redirect.ts

@@ -2,12 +2,12 @@ import util from "../../lib/util.ts";
 import events from "./events.ts";
 
 let routerReady = false;
-let preRedirect: { url: URL; replace?: boolean } | null = null;
+let preRedirect: URL | null = null;
 
 const onrouterready = (_: Record<string, unknown>) => {
   events.off("routerready", onrouterready);
   if (preRedirect) {
-    events.emit("popstate", { type: "popstate", ...preRedirect });
+    events.emit("popstate", { type: "popstate", url: preRedirect });
     preRedirect = null;
   }
   routerReady = true;
@@ -26,14 +26,20 @@ export function redirect(url: string, replace?: boolean) {
     return;
   }
 
-  const next = new URL(url, location.href);
-  if (next.href === location.href) {
+  const to = new URL(url, location.href);
+  if (to.href === location.href) {
     return;
   }
 
+  if (replace) {
+    history.replaceState(null, "", to);
+  } else {
+    history.pushState(null, "", to);
+  }
+
   if (routerReady) {
-    events.emit("popstate", { type: "popstate", url: next, replace });
+    events.emit("popstate", { type: "popstate", url: to });
   } else {
-    preRedirect = { url: next, replace };
+    preRedirect = to;
   }
 }

framework/react/router.ts

@@ -22,7 +22,7 @@ export type RouterProps = {
   readonly suspense?: boolean;
 };
 
-type DataCache = {
+type RouteData = {
   data?: unknown;
   dataCacheTtl?: number;
   dataExpires?: number;
@@ -35,7 +35,7 @@ export const Router: FC<RouterProps> = ({ ssrContext, suspense }) => {
   const [url, setUrl] = useState(() => ssrContext?.url || new URL(window.location?.href));
   const [modules, setModules] = useState(() => ssrContext?.routeModules || loadSSRModulesFromTag());
   const dataCache = useMemo(() => {
-    const cache = new Map<string, DataCache>();
+    const cache = new Map<string, RouteData>();
     modules.forEach(({ url, data, dataCacheTtl }) => {
       cache.set(url.pathname + url.search, {
         data,
@@ -108,7 +108,7 @@ export const Router: FC<RouterProps> = ({ ssrContext, suspense }) => {
     };
     const isSuspense = document.body.getAttribute("data-suspense") ?? suspense;
     const prefetchData = async (dataUrl: string) => {
-      const cache: DataCache = {};
+      const rd: RouteData = {};
       const fetchData = async () => {
         const res = await fetch(dataUrl, { headers: { "Accept": "application/json" }, redirect: "manual" });
         if (res.status === 404 || res.status === 405) {
@@ -125,16 +125,16 @@ export const Router: FC<RouterProps> = ({ ssrContext, suspense }) => {
           throw new FetchError(500, {}, "Missing the `Location` header");
         }
         const cc = res.headers.get("Cache-Control");
-        cache.dataCacheTtl = cc?.includes("max-age=") ? parseInt(cc.split("max-age=")[1]) : undefined;
-        cache.dataExpires = Date.now() + (cache.dataCacheTtl || 1) * 1000;
+        rd.dataCacheTtl = cc?.includes("max-age=") ? parseInt(cc.split("max-age=")[1]) : undefined;
+        rd.dataExpires = Date.now() + (rd.dataCacheTtl || 1) * 1000;
         return await res.json();
       };
       if (isSuspense) {
-        cache.data = fetchData;
+        rd.data = fetchData;
       } else {
-        cache.data = await fetchData();
+        rd.data = await fetchData();
       }
-      dataCache.set(dataUrl, cache);
+      dataCache.set(dataUrl, rd);
     };
     const onmoduleprefetch = (e: Record<string, unknown>) => {
       const pageUrl = new URL(e.href as string, location.href);
@@ -152,6 +152,12 @@ export const Router: FC<RouterProps> = ({ ssrContext, suspense }) => {
     const onpopstate = async (e: Record<string, unknown>) => {
       const url = (e.url as URL | undefined) || new URL(window.location.href);
       const matches = matchRoutes(url, routes);
+      const loadingBar = getLoadingBar();
+      let loading: number | null = setTimeout(() => {
+        loading = null;
+        loadingBar.style.opacity = "1";
+        loadingBar.style.width = "50%";
+      }, 200);
       const modules = await Promise.all(matches.map(async ([ret, meta]) => {
         const { filename } = meta;
         const rmod: RouteModule = {
@@ -173,12 +179,24 @@ export const Router: FC<RouterProps> = ({ ssrContext, suspense }) => {
       }));
       setModules(modules);
       setUrl(url);
-      if (e.url) {
-        if (e.replace) {
-          history.replaceState(null, "", e.url as URL);
+      setTimeout(() => {
+        if (loading) {
+          clearTimeout(loading);
+          loadingBar.remove();
         } else {
-          history.pushState(null, "", e.url as URL);
+          const fadeOutTime = 1.0;
+          loadingBar.style.transition = `opacity ${fadeOutTime}s ease-in-out, width ${fadeOutTime}s ease-in-out`;
+          setTimeout(() => {
+            loadingBar.style.opacity = "0";
+            loadingBar.style.width = "100%";
+          }, 0);
+          global.__loading_bar_remove_timer = setTimeout(() => {
+            global.__loading_bar_remove_timer = null;
+            loadingBar.remove();
+          }, fadeOutTime * 1000);
         }
+      }, 0);
+      if (e.url) {
         window.scrollTo(0, 0);
       }
     };
@@ -291,6 +309,30 @@ function loadSSRModulesFromTag(): RouteModule[] {
   return [];
 }
 
+function getLoadingBar(): HTMLDivElement {
+  if (typeof global.__loading_bar_remove_timer === "number") {
+    clearTimeout(global.__loading_bar_remove_timer);
+    global.__loading_bar_remove_timer = null;
+  }
+  let bar = (document.getElementById("loading-bar") as HTMLDivElement | null);
+  if (!bar) {
+    bar = document.createElement("div");
+    bar.id = "loading-bar";
+    document.body.appendChild(bar);
+  }
+  Object.assign(bar.style, {
+    position: "fixed",
+    top: "0",
+    left: "0",
+    width: "0",
+    height: "1px",
+    opacity: "0",
+    background: "rgba(128, 128, 128, 0.9)",
+    transition: "opacity 0.6s ease-in-out, width 3s ease-in-out",
+  });
+  return bar;
+}
+
 function getRouteModules(): Record<string, { defaultExport?: unknown; withData?: boolean }> {
   return global.__ROUTE_MODULES || (global.__ROUTE_MODULES = {});
 }