feat: add nprogress page transition indicator

This patch adds the nprogress page transition loading indicator. This is a temporary fix that should be addressed by simply making page transitions instantaneous. To do that, I will want to implement some type of caching or ISR strategy, or simply move back to using Fly.io on the edge (so my database is right next to my Node.js server). Closes: NC-642
nicholaschiang · Jul 24, 2023 · d56dd24 · d56dd24
1 parent 46e4676
commit d56dd24
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 2 deletions.
diff --git a/app/app.css b/app/app.css
@@ -129,3 +129,43 @@
     scrollbar-color: theme('colors.gray.800') theme('colors.gray.900');
   }
 }
+
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: theme('colors.gray.900');
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+.dark #nprogress .bar {
+  background: theme('colors.gray.100');
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px theme('colors.gray.900'), 0 0 5px theme('colors.gray.900');
+  opacity: 1.0;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+      -ms-transform: rotate(3deg) translate(0px, -4px);
+          transform: rotate(3deg) translate(0px, -4px);
+}
+
+.dark #nprogress .peg {
+  box-shadow: 0 0 10px theme('colors.gray.100'), 0 0 5px theme('colors.gray.100');
+}
diff --git a/app/root.tsx b/app/root.tsx
@@ -10,6 +10,7 @@ import {
   useRouteError,
   isRouteErrorResponse,
   useMatches,
+  useNavigation,
   type RouteMatch,
 } from '@remix-run/react'
 import { Analytics } from '@vercel/analytics/react'
@@ -22,7 +23,8 @@ import {
 } from '@vercel/remix'
 import cn from 'classnames'
 import { LogIn, LogOut } from 'lucide-react'
-import { Fragment, type ReactNode } from 'react'
+import NProgress from 'nprogress'
+import { Fragment, type ReactNode, useEffect } from 'react'
 
 import { ThemeSwitcher } from 'components/theme-switcher'
 import { buttonVariants } from 'components/ui/button'
@@ -200,6 +202,17 @@ export type LoaderData = SerializeFrom<typeof loader>
 
 function App({ data, children }: { data?: LoaderData; children: ReactNode }) {
   const [theme] = useTheme()
+  const navigation = useNavigation()
+  useEffect(() => {
+    // when the state is idle then we can complete the progress bar
+    if (navigation.state === 'idle') NProgress.done()
+    // and when it's something else it means it's either submitting a form or
+    // waiting for the loaders of the next location so we start it
+    else {
+      const timeoutId = setTimeout(() => NProgress.start(), 100)
+      return () => clearTimeout(timeoutId)
+    }
+  }, [navigation.state])
   return (
     <html lang='en' className={cn('h-full', theme)}>
       <head>

diff --git a/app/routes/shows._index.tsx b/app/routes/shows._index.tsx
@@ -7,7 +7,10 @@ import { prisma } from 'db.server'
 import { log } from 'log.server'
 
 export const meta: V2_MetaFunction = () => [
-  { title: 'Fashion Shows: Fashion Week, Runway, Designer Collections | Nicholas Chiang' },
+  {
+    title:
+      'Fashion Shows: Fashion Week, Runway, Designer Collections | Nicholas Chiang',
+  },
 ]
 
 export async function loader() {

diff --git a/package.json b/package.json
@@ -77,6 +77,7 @@
     "lucide-react": "^0.263.0",
     "morgan": "^1.10.0",
     "nanoid": "^4.0.2",
+    "nprogress": "^0.2.0",
     "pino": "^8.14.1",
     "pino-pretty": "^10.1.0",
     "prom-client": "^12.0.0",
@@ -116,6 +117,7 @@
     "@types/express-prometheus-middleware": "^1.2.1",
     "@types/morgan": "^1.9.4",
     "@types/node": "^18.16.20",
+    "@types/nprogress": "^0.2.0",
     "@types/progress": "^2.0.5",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml