implement our own nprogress bar
This commit is contained in:
keyan
parent
a426c8b539
commit
b1b8f9de56
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 ||
|
||||
Component?.name === 'Custom404') return
|
||||
const nprogressStart = (_, { shallow }) => !shallow && NProgress.start()
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
color: var(--theme-color);
|
||||
background: var(--theme-body) !important;
|
||||
color: var(--theme-color) !important;
|
||||
min-height: 100vh;
|
||||
min-height: 100svh;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue