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

[Kadir Selki]

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

[Nicolas Jarraud]

I noticed the same issue - Any solutions?

[Kadir Selki]

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.

[Roman Loiko]

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.

[Nicolas Jarraud]

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.

[Nicolas Jarraud]

I have the issue on Firefox.

[Jake Bonin]

+1