Merge pull request #352 from ourzora/add-page-loading

Add progress bar for page loading
ourzora · Aug 21, 2023 · 6c7ba07 · 6c7ba07 · vercel · Aug 21, 2023
2 parents f3dcfaf + 1bcdd6e
commit 6c7ba07
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 38 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -51,6 +51,7 @@
     "lodash": "^4.17.21",
     "multiformats": "9.9.0",
     "next": "^13.0.3",
+    "nextjs-progressbar": "^0.0.16",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-content-loader": "^6.0.2",

diff --git a/apps/web/src/pages/_app.tsx b/apps/web/src/pages/_app.tsx
@@ -7,6 +7,7 @@ import '@zoralabs/zord/index.css'
 import { VercelAnalytics } from 'analytics'
 import type { NextPage } from 'next'
 import type { AppProps } from 'next/app'
+import NextNProgress from 'nextjs-progressbar'
 import type { ReactElement, ReactNode } from 'react'
 import { SWRConfig } from 'swr'
 import { WagmiConfig } from 'wagmi'
@@ -34,6 +35,14 @@ function App({ Component, pageProps, err }: AppPropsWithLayout) {
     <WagmiConfig client={client}>
       <RainbowKitProvider chains={chains} appInfo={{ disclaimer: Disclaimer }}>
         <SWRConfig value={{ fallback }}>
+          <NextNProgress
+            color={'#008BFF'}
+            startPosition={0.125}
+            stopDelayMs={200}
+            height={2}
+            showOnShallow={false}
+            options={{ showSpinner: false }}
+          />
           {getLayout(<Component {...pageProps} err={err} />)}
         </SWRConfig>
         <NetworkController.Mainnet>

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