Run the loader on change of searchParams

[ashishworkspace]

Hey, I just wanted to know if I can run the top-loading bar on every change in the search parameters.

[kapsule-studio]

Have you tried the shallowRouting options ? https://github.com/Skyleen77/next-nprogress-bar?tab=readme-ov-file#shallowrouting-optional---boolean

[stefan-girlich]

@kapsule-studio Unfortunately shallowRouting will not show the loading bar when only search params change. Environment:

"next": "^14.2.3",
"nextjs-toploader": "^1.6.12",

Would you have any further ideas? Happy to provide debug information.

My current workaround

Invalidate route

    const applySearchParamsWorkaround = (url: URL): URL => {
        const { location } = window
        const isSamePage = url.pathname === location.pathname
        const paramsChanged = url.search !== location.search
        if (isSamePage && paramsChanged) {
            url.pathname = `force_reload_${Math.random()}`
        }

        return url
    }
  return (
    <ProgressBar
      shallowRouting
      targetPreprocessor={applySearchParamsWorkaround}
    />

Use custom useRouter

import { useRouter } from 'next-nprogress-bar'

[Glup3]

Thanks for the workaround! @stefan-girlich