apal21 / nextjs-progressbar Goto Github PK

I want to implement the loading to notify the user that it is fetching.

During fetching unchanged route to trigger routeChangeStart.

I want to control it to load as soon as possible and stop when an error occurs, How to implement it like NProgress.start() and NProgress.done() ?

After the user changes their locale by clicking a locale link, the system will persist the new locale on the user session. So to prevent the app from not giving any feedback to the user while the locale is being persisted, I want to trigger nprogress loading.

Is there a way to trigger nprogress manually within the hook?

Nprogress don't have their own types declaration, so you've to add @types/nprogress.

That's why nprogress options aren't showing any autocomplete.
Should I make a new PR by adding nprogress types?

Now I can`t hide right side spinner

It's often preferable to delay showing the loading indicator until a request has taken longer than 250ms-500ms. This prevents the loading indicator from appearing constantly on quick page visits, which can be visually distracting.

<NextNprogress
        color="#29D"
        startPosition={0.3}
        delayMs={250}
        stopDelayMs={200}
        height="2"
      />

I implemented an onClick event function that allows the <Link> component to display a confirmation modal whenever the page is moved as follows.

e.preventDefault();

handleShowModal(
    commonModal({
          title: 'title',
          description: 'description',
          handleClickClose: () => {
             handleHideModal();
             NProgress.done(true);
          },
          handleClickOk: () => {
            router.replace(`${href}`);
          },
    }),
);

The issue I'm facing is that NProgress starts appearing at the top before e.preventDefault() gets executed due to <Link> component. To resolve this, I had to install nprogress and @types/nprogress additionally, which I find less than ideal.

Is it possible that nextjs-progressbar, which already includes nprogress as a dependency, supports nprogress.start() and nprogress.done() functionalities?

I'm curious if it could handle this without the need for additional installations, similar to how it's done locally.

How can I manually trigger the spinner? Or force it to be shown? E.g. when wanting to style it.

Description

In the documentation you have added height as a string when it should be a number as per type declaration.

<NextNprogress
  color="#29D"
  startPosition={0.3}
  stopDelayMs={200}
  height="3"
/>

Error

Expected

Hi,

I thinks that the version v0.0.15 has not been published on NPM

https://www.npmjs.com/package/nextjs-progressbar

Thanks!

Failed to compile.

ModuleNotFoundError: Module not found: Error: Can't resolve 'prop-types' in '/node_modules/nextjs-progressbar/dist'

Maybe add prop-types as a dependency?

Thanks for this package!

In additional to the loading bar animation there's a circular spinner in the top right corner of the screen. When inspecting it, I see that it has an id of nprogress however I'm unable to hide it via 'display: none`.

Would be great to have support for custom Spinners.
To use like that:
<NextNProgress color="black" height="2" > <MyCustomSpinner></MyCustomSpinner> </NextNProgress>

Hello there, I've noticed that next 13 removed router.events (the API that this lib uses to detect the route change)

There is a conversation going on here relevant for this topic: vercel/next.js#41745 (comment)

Anyone found a nasty workaround to get a progress bar at the top of the page on Next 13 (app directory)?

Thanks!

When I pushed a Next 13 site up to Vercel that had this package I received the following build errors:

NEXT_DYNAMIC_NO_SSR_CODE
DYNAMIC_SERVER_USAGE

When I removed this package, it resolved itself. I am unfamiliar with what/why could cause these errors so hoping someone with a bigger brain than I can advise.

I couldn't get a showSpinner prop in the props to stop showing the spinner while loading

could you please min (one liner) the css ... its not optimised currently
appreciate the great work you did

How can i remove spinner and display only progressbar?

Hey! I noticed that since Next.js 10.2.0 (specifically - when transitioning from 10.1.3 to 10.2.0), the behavior for running progress bar on page load or refresh has changed.
Earlier, the progress bar would not show up during the initial load / reload, but after the update the progress bar is always present.
Would it be possible to add some kind of option to disable this behavior?
I think it looks better when the progress bar is only visible in page transitions (where there are actual js page chunks blocking the transition - render). In the initial load, there are no render-blocking bundles and hence the progressbar is unnecessary in my opinion.
Thanks in advance!

Hello!

Is there a way to disable NextProgress when visiting pages that contain static content or were created with getStaticProps?

Navigating to those pages is so fast that I don't see the need to show the progress bar in those cases. Very similar to how it works in Gatsby.JS, where the progress bar is only shown when the request is taking time.

Thank you.

Setting showSpinner to false in the options prop will still result in the spinner being displayed.

Also, when will the addition of delayMs be published to the NPM repo?

EDIT: This has suddenly started working so I assume something was getting cached somewhere.

This dependency introduces accessibility issues:
https://github.com/rstacruz/nprogress

It is using invalid aria roles. The repo has a lot of issues about this and even pull-requests, but it seems like the package is just abandoned.

Here is the issue:
https://github.com/rstacruz/nprogress/issues/232

In the issue there is a forked version mentioned where this is resolved (and the repo is not abandoned):
https://github.com/nmackey/accessible-nprogress

I suggest switching these dependencies..

_app.js
`
// * Components
// * Natives
import { NextIntlProvider } from 'next-intl';
import { useRouter } from 'next/router';
import { useEffect } from 'react';

// * Dependencies
import NextNprogress from 'nextjs-progressbar';
import * as gtag from '/services/gtag';
import Analytics from '/components/global/analytics';

// * Context
import { AppWrapper } from '/context/state';

// * CSS
import 'tailwindcss/tailwind.css';

// * Render
export default function MyApp({ Component, pageProps }) {

    const router = useRouter();

    useEffect(() => {
        const handleRouteChange = url => {
            gtag.pageview(url);
        }
        router.events.on('routeChangeComplete', handleRouteChange);
        return () => {
            router.events.off('routeChangeComplete', handleRouteChange)
        }
    }, [router.events]);

    return (
        <>
            <NextIntlProvider messages={pageProps.messages}>
                <AppWrapper>
                    <NextNProgress color='#3e63ca' />
                    <Component {...pageProps} className='antialiased' />
                    <Analytics />
                </AppWrapper>
            </NextIntlProvider>
        </>
    )
}

`

What i'm doing wrong?

in the mobile:
when the progressbar is loading, the page has a transform and when loading is complated, the page is ok

Hi

I've used this module in a couple of projects, and enjoy it generally! Thanks so much.

However I've come across some (seemingly) unexpected behaviour for Next JS projects utilising getStaticProps and fallback: 'block' in getStaticPaths as re-generation strategy. It seems when hitting a page, that needs some background generation, that the progress bar never finishes entirely. Usually hangs with approx 10% or 5% left. While the page in question is fully operational, and all, I've noticed users and clients interpret it as slow loading speed and bad performance. If you refresh the browser while the last 5-10% is missing, it reloads instantly and the progress bar also run all the way through.
Is this something that can be handled with options on the component, is it expected behaviour, and just not the best fit for SSG/ISG Next JS applications or something else?

In order to reproduce. Test in Next JS project with static site generation and dynamic paths and use NextNProgress in app.js. My options is this:

<NextNProgress color="#676767" options={{ showSpinner: false }} />

Would it be possible to do what some other libraries do (namely, react-tippy) and export a css file rather than injecting a script tag? This way next can handle the styles, minify and bundle them with the other styles.

For backwards compatibility, you could have a prop called injectStyles and have it default to true. If you'd like

Lmk what you think :)

Reference (react-tippy):
First, you need import css

import 'react-tippy/dist/tippy.css'

Edit: After revisiting, I see that the reason this is probably done is because color and height are injected into the css from the params passed by the user. I'm not against this, but I think that the style tag should atleast be minified.

any known how to implement this in nextjs app router, pls need help

Thanks for this package - is there an easy way to show the bar at the bottom of the screen instead of the top? Changing top:0 to e.g. bottom:3 didn't immediately work.

The issue I ran into is that using shallow routing causes the progressbar to appear even with the showOnShallow option set to false. The main problem is that Next.js 12.2 fires the routeChangeError event unnecessarily. I have already reported it on their repo, but this also surfaced an issue with this component. The routeChangeError has a different function signature than routeChangeComplete, meaning the shallow routing flag gets ignored and the progressbar gets display even with showOnShallow set to false.

I found a previous mention of this issue here: #70 (comment), but it looks like it has not been fixed yet.

Using the custom app as follows:

import NextNProgress from 'nextjs-progressbar';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <NextNProgress />
      <Component {...pageProps} />;
    </>
  );
}

NextNProgress doesn't seem to be loading at all - I've tried surrounding it with

tags and there was nothing between that, although I don't know if that's intentional. Any help would be appreciated. Thanks!

I'm working on a Next.js project and I'm using the RTL direction in my document, Is there a way to make the progress bar direction from the right to left ?

Pretty much straightforward, add a prop to disable spinner. It is cumbersome to disable via transformCss.

Hi! love your progress bar easy to follow, but how can i make it appear when i refresh the page. It appears only when you go to one page to another.

https://nextjs.org/docs/advanced-features/i18n-routing#getting-started

when i18n config includes domains

    domains: [
      {
        domain: 'example.com',
        defaultLocale: 'en-US',
        http: true,
      },
      {
        domain: 'fr.example.com',
        defaultLocale: 'fr',
        // an optional http field can also be used to test
        // locale domains locally with http instead of https
        http: true,
      },
    ],

The progress bar will not longer appear in DOM, but it works regularly without it.

I just take a look at the source code, I am not sure if it's an i18n router issue from next.js.
But I want to make sure it's reproducible.

Doesn't support react version 18.

Hello, Apal. Thank you for making this library!

Sorry for posting a question here 🙏 I'm really interested about your experience with tsup and styled-jsx.
I see you've chosen to style your component with raw style and id. That's probably a good choice for this particular project.

But what what you do if you had to develop a component library for NextJS?
You'd probably consider styled-jsx which is NextJS' default styling library, right?!

Unfortunately, styled-jsx is not compatible with tsup because it requires a transpilation step with babel macro/plugin. And tsup is based on esbuild which is unrelated to babel at all.
That was my research, maybe you'll be kind enough to share yours 😉

It's really unclear how to develop a component library for NextJS with tsup / tsdx / vite / microbundle / etc... besides configuring Webpack/Rollup from the ground up. Every high-level tool I try is incompatible with styled-jsx expectations in one way or another.

We're getting this after setting showOnShallow={false}. I'm guessing there is a missing null check in there.

can we place the css style inside head tag instead of inside __next root app ?

Hey there, great package you have here and other than the confusing installation instructions, I think this is a great plug & play package. Great work 🍾

I really suggest updating the readme as this is quite confusing:
And for rendering add <NextNProgress /> inside Container component.

Not everyone has a Container component and I now understand after the fact that Container is codename for any larger Context but this isn't very clear. Thanks to issue: #6, I figured out that I just needed to include <NextNProgress /> anywhere in the MyApp() return() scope for it to render.

Just a suggestion, perhaps I was the only one confused.

I have this code at the moment

import NProgress from "nextjs-progressbar";

export default function PageLoader() {
  return (
    <NProgress
      options={{
        template: '<div class="bar" role="progressbar" aria-role="Changing page"></div>',
        barSelector: '[role="progressbar"]',
        showSpinner: false,
      }}
      transformCSS={() => {
        return (
          <style jsx>{`
            #nprogress {
              pointer-events: none;
            }

            #nprogress .bar {
              background: pink;
              position: fixed;
              z-index: 999;
              top: 0;
              left: 0;
              width: 100%;
              height: 0.25rem;
            }
          `}</style>
        );
      }}
    />
  );
}

I'm passing jsx prop to add css syntax highlighting in vscode. Although this is working, I'm getting this warning in the console.

Warning: Received `true` for a non-boolean attribute `jsx`

Thanks in advance and really appreciate this lib 😊