apal21 / nextjs-progressbar Goto Github PK
View Code? Open in Web Editor NEWA simple Next.js progressbar component using NProgress.
Home Page: https://www.npmjs.com/package/nextjs-progressbar
License: MIT License
A simple Next.js progressbar component using NProgress.
Home Page: https://www.npmjs.com/package/nextjs-progressbar
License: MIT License
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 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 ๐
Pretty much straightforward, add a prop to disable spinner. It is cumbersome to disable via transformCss.
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!
How can I manually trigger the spinner? Or force it to be shown? E.g. when wanting to style it.
I couldn't get a showSpinner prop in the props to stop showing the spinner while loading
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!
Would be great to have support for custom Spinners.
To use like that:
<NextNProgress color="black" height="2" > <MyCustomSpinner></MyCustomSpinner> </NextNProgress>
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!
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
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?
Doesn't support react version 18.
Now I can`t hide right side spinner
_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>
</>
)
}
`
How can i remove spinner and display only progressbar?
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 }} />
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 ?
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.
nextjs-progressbar/src/index.tsx
Line 109 in a122fd2
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..
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() ?
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.
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"
/>
any known how to implement this in nextjs app router, pls need help
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.
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.
could you please min (one liner) the css ... its not optimised currently
appreciate the great work you did
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.
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.
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 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.
"next": "12.0.10",
"nextjs-progressbar": "^0.0.13",
// app.tsx
...
<NextNProgress stopDelayMs={0} options={{ showSpinner: false }} />
// form guard
import { useRouter } from 'next/router';
import { useEffect } from 'react';
export const useFormGuard = (isDirty: boolean) => {
const router = useRouter();
const message = 'ok?';
const pageChangeHandler = () => {
const answer = window.confirm(message);
if (!answer) {
// crash here
router.events.emit('routeChangeError');
// throw 'routeChange aborted.';
}
};
const beforeUnloadhandler = (event: BeforeUnloadEvent) => {
event.preventDefault();
event.returnValue = message;
};
useEffect(() => {
if (isDirty) {
router.events.on('routeChangeStart', pageChangeHandler);
window.addEventListener('beforeunload', beforeUnloadhandler);
return () => {
router.events.off('routeChangeStart', pageChangeHandler);
window.removeEventListener('beforeunload', beforeUnloadhandler);
};
}
}, [isDirty, router]);
};
Hi,
I thinks that the version v0.0.15 has not been published on NPM
https://www.npmjs.com/package/nextjs-progressbar
Thanks!
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.