Fix: progress bar shown on back navigation through pathname check (#1633)

* fix: progress bar shown on back navigation through pathname check

* fix progress done race

* use router.pathname instead cause it's already there

---------

Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>
Co-authored-by: k00b <k00b@stacker.news>
This commit is contained in:
Lorenzo 2024-12-01 02:05:26 +01:00 committed by GitHub
parent 0837460c53
commit d88971e8e5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 4 deletions

View File

@ -7,7 +7,7 @@ import { PriceProvider } from '@/components/price'
import { BlockHeightProvider } from '@/components/block-height'
import Head from 'next/head'
import { useRouter } from 'next/dist/client/router'
import { useEffect } from 'react'
import { useCallback, useEffect } from 'react'
import { ShowModalProvider } from '@/components/modal'
import ErrorBoundary from '@/components/error-boundary'
import { LightningProvider } from '@/components/lightning'
@ -46,9 +46,17 @@ export default function MyApp ({ Component, pageProps: { ...props } }) {
const client = getApolloClient()
const router = useRouter()
const shouldShowProgressBar = useCallback((newPathname, shallow) => {
return !shallow || newPathname !== router.pathname
}, [router.pathname])
useEffect(() => {
const nprogressStart = (_, { shallow }) => !shallow && NProgress.start()
const nprogressDone = (_, { shallow }) => !shallow && NProgress.done()
const nprogressStart = (newPathname, { shallow }) => {
shouldShowProgressBar(newPathname, shallow) && NProgress.start()
}
const nprogressDone = (newPathname, { shallow }) => {
NProgress.done()
}
router.events.on('routeChangeStart', nprogressStart)
router.events.on('routeChangeComplete', nprogressDone)
@ -77,7 +85,7 @@ export default function MyApp ({ Component, pageProps: { ...props } }) {
router.events.off('routeChangeComplete', nprogressDone)
router.events.off('routeChangeError', nprogressDone)
}
}, [router.asPath, props?.apollo])
}, [router.asPath, props?.apollo, shouldShowProgressBar])
useEffect(() => {
// hack to disable ios pwa prompt for https://github.com/stackernews/stacker.news/issues/953