implement our own nprogress bar

components/comments.js

@@ -73,7 +73,7 @@ export default function Comments ({ parentId, pinned, bio, parentCreatedAt, comm
               router.push({
                 pathname: router.pathname,
                 query: { ...router.query, sort }
-              }, router.asPath, { scroll: false })
+              }, undefined, { scroll: false })
             }}
           />
         : null}

next.config.js

@@ -120,6 +120,10 @@ module.exports = withPlausibleProxy()({
         source: '/.well-known/web-app-origin-association',
         destination: '/api/web-app-origin-association'
       },
+      {
+        source: '/~:sub/:slug*\\?:query*',
+        destination: '/~/:slug*?:query*&sub=:sub'
+      },
       {
         source: '/~:sub/:slug*',
         destination: '/~/:slug*?sub=:sub'

package-lock.json

@@ -47,10 +47,10 @@
         "next-auth": "^4.22.3",
         "next-plausible": "^3.10.1",
         "next-seo": "^6.1.0",
-        "nextjs-progressbar": "0.0.16",
         "node-s3-url-encode": "^0.0.4",
         "nodemailer": "^6.9.4",
         "nostr": "^0.2.8",
+        "nprogress": "^0.2.0",
         "opentimestamps": "^0.4.9",
         "page-metadata-parser": "^1.1.4",
         "pageres": "^7.1.0",
@@ -3685,11 +3685,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/@types/nprogress": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@types/nprogress/-/nprogress-0.2.0.tgz",
-      "integrity": "sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A=="
-    },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -13603,20 +13598,6 @@
         "react-dom": ">=16.0.0"
       }
     },
-    "node_modules/nextjs-progressbar": {
-      "version": "0.0.16",
-      "resolved": "https://registry.npmjs.org/nextjs-progressbar/-/nextjs-progressbar-0.0.16.tgz",
-      "integrity": "sha512-GV0fD38EMD3vSDCmkq+tObmoup6QA91a6a9MxGuhJZuRk/9TNsrHGnIQQQ/sggkMkXuT4fBgF6jRjFwScDT3zA==",
-      "dependencies": {
-        "@types/nprogress": "^0.2.0",
-        "nprogress": "^0.2.0",
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "next": ">= 6.0.0",
-        "react": ">= 16.0.0"
-      }
-    },
     "node_modules/noble-secp256k1": {
       "version": "1.2.14",
       "resolved": "https://registry.npmjs.org/noble-secp256k1/-/noble-secp256k1-1.2.14.tgz",
@@ -22274,11 +22255,6 @@
         }
       }
     },
-    "@types/nprogress": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@types/nprogress/-/nprogress-0.2.0.tgz",
-      "integrity": "sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A=="
-    },
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -29170,16 +29146,6 @@
       "resolved": "https://registry.npmjs.org/next-seo/-/next-seo-6.1.0.tgz",
       "integrity": "sha512-iMBpFoJsR5zWhguHJvsoBDxDSmdYTHtnVPB1ij+CD0NReQCP78ZxxbdL9qkKIf4oEuZEqZkrjAQLB0bkII7RYA=="
     },
-    "nextjs-progressbar": {
-      "version": "0.0.16",
-      "resolved": "https://registry.npmjs.org/nextjs-progressbar/-/nextjs-progressbar-0.0.16.tgz",
-      "integrity": "sha512-GV0fD38EMD3vSDCmkq+tObmoup6QA91a6a9MxGuhJZuRk/9TNsrHGnIQQQ/sggkMkXuT4fBgF6jRjFwScDT3zA==",
-      "requires": {
-        "@types/nprogress": "^0.2.0",
-        "nprogress": "^0.2.0",
-        "prop-types": "^15.8.1"
-      }
-    },
     "noble-secp256k1": {
       "version": "1.2.14",
       "resolved": "https://registry.npmjs.org/noble-secp256k1/-/noble-secp256k1-1.2.14.tgz",

package.json

@@ -48,10 +48,10 @@
     "next-auth": "^4.22.3",
     "next-plausible": "^3.10.1",
     "next-seo": "^6.1.0",
-    "nextjs-progressbar": "0.0.16",
     "node-s3-url-encode": "^0.0.4",
     "nodemailer": "^6.9.4",
     "nostr": "^0.2.8",
+    "nprogress": "^0.2.0",
     "opentimestamps": "^0.4.9",
     "page-metadata-parser": "^1.1.4",
     "pageres": "^7.1.0",

pages/_app.js

@@ -3,7 +3,6 @@ import { ApolloProvider, gql } from '@apollo/client'
 import { MeProvider } from '../components/me'
 import PlausibleProvider from 'next-plausible'
 import getApolloClient from '../lib/apollo'
-import NextNProgress from 'nextjs-progressbar'
 import { PriceProvider } from '../components/price'
 import Head from 'next/head'
 import { useRouter } from 'next/dist/client/router'
@@ -13,6 +12,12 @@ import ErrorBoundary from '../components/error-boundary'
 import { LightningProvider } from '../components/lightning'
 import { ServiceWorkerProvider } from '../components/serviceworker'
 import { SSR } from '../lib/constants'
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+
+NProgress.configure({
+  showSpinner: false
+})
 
 function writeQuery (client, apollo, data) {
   if (apollo && data) {
@@ -31,9 +36,14 @@ function MyApp ({ Component, pageProps: { ...props } }) {
   const router = useRouter()
 
   useEffect(() => {
-    if (router.query.nodata || !router.isReady ||
+    const nprogressStart = (_, { shallow }) => !shallow && NProgress.start()
-      Component?.name === 'Custom404') return
+    const nprogressDone = (_, { shallow }) => !shallow && NProgress.done()
 
+    router.events.on('routeChangeStart', nprogressStart)
+    router.events.on('routeChangeComplete', nprogressDone)
+    router.events.on('routeChangeError', nprogressDone)
+
+    if (!props?.apollo) return
     // HACK: 'cause there's no way to tell Next to skip SSR
     // So every page load, we modify the route in browser history
     // to point to the same page but without SSR, ie ?nodata=true
@@ -46,10 +56,17 @@ function MyApp ({ Component, pageProps: { ...props } }) {
     }, router.asPath, { ...router.options, shallow: true }).catch((e) => {
       // workaround for https://github.com/vercel/next.js/issues/37362
       if (!e.cancelled) {
+        console.log(e)
         throw e
       }
     })
-  }, [router.pathname, router.query, Component?.name])
+
+    return () => {
+      router.events.off('routeChangeStart', nprogressStart)
+      router.events.off('routeChangeComplete', nprogressDone)
+      router.events.off('routeChangeError', nprogressDone)
+    }
+  }, [router.asPath, props?.apollo])
 
   /*
     If we are on the client, we populate the apollo cache with the
@@ -66,14 +83,6 @@ function MyApp ({ Component, pageProps: { ...props } }) {
 
   return (
     <>
-      <NextNProgress
-        color='var(--bs-primary)'
-        startPosition={0.3}
-        stopDelayMs={200}
-        height={2}
-        showOnShallow={false}
-        options={{ showSpinner: false }}
-      />
       <Head>
         <meta name='viewport' content='initial-scale=1.0, width=device-width' />
       </Head>

styles/globals.scss

@@ -95,6 +95,15 @@ $grid-gutter-width: 2rem;
   }
 }
 
+#nprogress .bar {
+  background: var(--bs-primary) !important;
+  height: 2px !important;
+}
+
+#nprogress .peg {
+  box-shadow: 0 0 10px var(--bs-primary), 0 0 5px var(--bs-primary) !important;
+}
+
 .standalone {
   display: none;
 }
@@ -188,8 +197,8 @@ mark {
 }
 
 html, body {
-  background: var(--theme-body);
+  background: var(--theme-body) !important;
-  color: var(--theme-color);
+  color: var(--theme-color) !important;
   min-height: 100vh;
   min-height: 100svh;
 }