ProgressBar does not work on first <Link> click after application startup or force refresh

[kadirselki]

I'm experiencing an issue with my Next.js application where the progress bar is not visible during the first page navigation using the <Link> component after a force refresh (specifically using Ctrl+Shift+R) or when the application first starts. However, after this initial navigation, the progress bar operates correctly on all subsequent <Link> clicks.

I have integrated the progress bar into my application using the following Provider component:

'use client';

import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';

export const RouterLoadingProvider = ({ children }: { children: React.ReactNode }) => {
    return (
        <>
            <ProgressBar height="4px" color="blue" options={{ showSpinner: false }} shallowRouting />
            {children}
        </>
    );
};

----

<RouterLoadingProvider>{children}</RouterLoadingProvider>

Next version: 14.1.0 using App router

[njarraud]

I noticed the same issue - Any solutions?

[kadirselki]

If you have used <Suspense> inside or outside the Provider for "next-nprogress-bar", you might receive this error. It will be fixed once you remove it. I solved it this way.

[grevzi]

Hi @kadirselki do you mean to remove Suspense entirely from the whole App? Usually all the providers are located at the top of your app and that mean that all Suspense should be removed? I guess that is not the fix.

Did someone know how to fix it without Suspense removal? Thanks.

[njarraud]

If you have used <Suspense> inside or outside the Provider for "next-nprogress-bar", you might receive this error. It will be fixed once you remove it. I solved it this way.

This is a new project with nothing in and no Suspense. I still have the issue on 2.3.9

[argnivb]

I am having the same problem but I have noticed that in Firefox the bar is displayed correctly on first navigation. In my case I have Suspense boundary in the React tree but it is added by a third party library so i can´t remove it. @kadirselki please reopen the issue.

[njarraud]

I have the issue on Firefox.

[jakebonin]

+1