NProgressBar not working in my NextJs 14.2.2

IAmYoungbossy commented 2 months ago

I have tried to implement this in my project following the documentation but the progress bar doesn't show when navigating between routes.

Below is my ProgressProvider component

"use client";

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

const ProgressProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  return (
    <>
      {children}
      <ProgressBar
        height="4px"
        color="#00bfff"
        options={{ showSpinner: true }}
        shallowRouting
      />
    </>
  );
};

export default ProgressProvider;

It is being imported and used in my RootLayout as shown below, but it's not working. Is there something I'm not doing right?

// Styles
import "./globals.css";

// Packages
import localFont from "next/font/local";

// Components
import { Footer } from "@/components/Footer";
import { Header } from "@/components/Header";

// Providers
import AppProviders from "./provider";
import ProgressProvider from "./ProgressProvider";

export const product_sans = localFont({
  display: "swap",
  variable: "--product-sans",
  fallback: ["system-ui", "arial"],
  preload: false,
  src: [
    {
      weight: "900",
      style: " normal",
      path: "./fonts/ProductSans-Black.ttf",
    },
    {
      weight: "900",
      style: " italic",
      path: "./fonts/ProductSans-BlackItalic.ttf",
    },
    {
      weight: "700",
      style: " normal",
      path: "./fonts/ProductSans-Bold.ttf",
    },
    {
      weight: "700",
      style: " italic",
      path: "./fonts/ProductSans-BoldItalic.ttf",
    },
    {
      weight: "400",
      style: " italic",
      path: "./fonts/ProductSans-Italic.ttf",
    },
    {
      weight: "300",
      style: " normal",
      path: "./fonts/ProductSans-Light.ttf",
    },
    {
      weight: "300",
      style: " italic",
      path: "./fonts/ProductSans-LightItalic.ttf",
    },
    {
      weight: "500",
      style: " normal",
      path: "./fonts/ProductSans-Medium.ttf",
    },
    {
      weight: "500",
      style: " italic",
      path: "./fonts/ProductSans-MediumItalic.ttf",
    },
    {
      weight: "400",
      style: " normal",
      path: "./fonts/ProductSans-Regular.ttf",
    },
  ],
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${product_sans.className} relative min-h-screen`}
      >
        <ProgressProvider>
          <AppProviders>
            <Header />
            <main>{children}</main>
            <Footer />
          </AppProviders>
        </ProgressProvider>
      </body>
    </html>
  );
}

Any help would be very much appreciated. Thanks

IAmYoungbossy commented 1 month ago

Solution

Hello everyone,

I was able to find the solution for why the progress bar was not displaying in my Next.js app. The implementation as posted above is fine and should work in your project.

Key Issue: z-index Conflict

The issue was that the z-index of my header component was higher than the default z-index set on the NProgress element. To resolve this, I had to target the progress bar element with the following CSS rule:

css

#nprogress .bar {
  z-index: 99999 !important;
}

Updated ProgressBar Settings

I also updated some of the settings on the ProgressBar component as shown below:

jsx

"use client";

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

const ProgressProvider = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      {children}
      <ProgressBar
        height="6px"
        shallowRouting
        color="#f69446"
        options={{ showSpinner: true }}
      />
    </>
  );
};

export default ProgressProvider;

Additional Note

Another thing I noticed is that most times for your settings to be updated properly, you have to restart your server.

I have resolved the issue on my end. Please feel free to close the issue if you find this solution acceptable. Thank you!

leeansilva commented 3 weeks ago

Thank you so much

acatzk commented 1 week ago

This is not working in next.js app directory version 14.2.4

IAmYoungbossy commented 1 week ago

This is not working in next.js app directory version 14.2.4

Can you show your implementation process and any error you're getting?

acatzk commented 1 week ago

@IAmYoungbossy No error at all. I follow the instruction given above but nothing works.

IAmYoungbossy commented 1 week ago

@IAmYoungbossy No error at all. I follow the instruction given above but nothing works.

Have you checked the z-index value of your header component to make sure it's not higher than the default z-index set on NProgressBar? That was the issue I faced too. @acatzk

You can increase the z-index of your NprogressBar by using the selector below in your CSS file

#nprogress .bar {
  z-index: 99999 !important;
}

acatzk commented 1 week ago

@IAmYoungbossy No error at all. I follow the instruction given above but nothing works.

Have you checked the z-index value of your header component to make sure it's not higher than the default z-index set on NProgressBar? That was the issue I faced too. @acatzk

You can increase the z-index of your NprogressBar by using the selector below in your CSS file
#nprogress .bar {
  z-index: 99999 !important;
}

Yep Nothing happens

IAmYoungbossy commented 1 week ago

@IAmYoungbossy No error at all. I follow the instruction given above but nothing works.

Have you checked the z-index value of your header component to make sure it's not higher than the default z-index set on NProgressBar? That was the issue I faced too. @acatzk You can increase the z-index of your NprogressBar by using the selector below in your CSS file
#nprogress .bar {
  z-index: 99999 !important;
}
Yep Nothing happens

Open your dev tool console, click on the element tab and try to navigate to a different route. While navigating check if the nprogress-busy class is injected into your html tag as shown below. If it is then one of your element has a higher z-index than what is set on progressBar element.

If nothing is being injected then check if your ProgressBar provider is imported and used used in your root layout.

Skyleen77 commented 2 days ago

I increase the z-index to 99999 in the last version

Skyleen77 / next-nprogress-bar