Add progress bar for page loading

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",

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>