feat: add nprogress bar for page transition indication (#2026)

Co-authored-by: Nick Taylor <[email protected]>
open-sauced · Nov 9, 2023 · 828ca4d · 828ca4d
1 parent b261253
commit 828ca4d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
diff --git a/package.json b/package.json
@@ -88,6 +88,7 @@
     "echarts": "^5.4.1",
     "echarts-for-react": "^3.0.2",
     "next": "^13.4.7",
+    "nextjs-progressbar": "^0.0.16",
     "octokit": "^2.0.14",
     "path-to-regexp": "^6.2.1",
     "posthog-js": "^1.83.0",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -8,6 +8,7 @@ import Head from "next/head";
 import { useRouter } from "next/router";
 import { SessionContextProvider } from "@supabase/auth-helpers-react";
 import { SWRConfig } from "swr";
+import NextNProgress from "nextjs-progressbar";
 
 import posthog from "posthog-js";
 import { PostHogProvider } from "posthog-js/react";
@@ -146,7 +147,7 @@ function MyApp({ Component, pageProps }: ComponentWithPageLayout) {
           provider: localStorageProvider,
         }}
       >
-        {/* <Toaster position="top-center" /> */}
+        <NextNProgress options={{ showSpinner: false }} color="hsla(19, 100%, 50%, 1)" height={4} />
         <Toaster />
         <SessionContextProvider supabaseClient={supabaseClient} initialSession={pageProps.initialSession}>
           <PostHogProvider client={posthog}>