A Next.js Top Loading Bar component made using nprogress, works with Next.js 14 , Next.js 13 and React.
Home Page: https://www.npmjs.com/package/nextjs-toploader
License: MIT License
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Adding the component into the root layout gives a hydration error.
app/layout.js:
import NextTopLoader from 'nextjs-toploader';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<NextTopLoader />
{children}
</body>
</html>
);
}
Putting <NextTopLoader /> into a client component and using that in the root layout gives the same error.
Considering this case
<a href="/username">
<button
onClick={(e) => {
e.stopPropagation();
follow();
}}>
Follow
</button>
</a>Issue: When the button is clicked, the progress bar triggered
Expected: When the button is clicked, the progress bar should not do anything. There should be a way to prevent the progress bar to not being triggered
Theres a bad practise happening which leads to failure of html murkup validator test, and it can harm overall website(s) health.
<style> elements can't be child of the body element
After installing top loader I'm getting this warning from next.jsWhen I call router.push from useRouter, the bar never shows up.
Hi,
A prop for disabling the loader when we click an a link to scrolls to an anchor on the same would be nice.
Right now the loader starts and gets stuck after a little bit. You have to click the link a second time in order for it to disappear.
Thanks
i set showSpinner to false and its not change anything, i mean the spinner still showing
i import this toploader in root layout.tsx, i use latest version of nextjs for now the version is "13.4.2"
here is my configuration
<NextTopLoader color="#F43F5E" showSpinner={false} />
At first I thought color only works with hex string,
then I figured out something like this also works.
const primaryRef = useRef('var(--primary)')
return (
<NextTopLoader
color={`hsl(${primaryRef.current})`}
showSpinner={showSpinner}
/>
)
loader start when click on even if onClick e.preventDefault()
After applied @nextjs-toploader, webpack-hmr is always pending
It's hard to visualize how your package will look and investing time in adding it first to see how it looks is a huge barrier for entry for most people who hear about this project for the first time.
Great Library. Thanks for your work.
So far it works great for Link components but for useRouter, it doesn't seem to work at all. Is there some workaround it?
Edit: After going through multiple comments here, I have settled on this approach https://github.com/CivicDataLab/opub-mono/blob/main/apps/www/lib/navigation.tsx
Hey,
I was playing around again with this after the issue with the anchor.
This allowed me to find another issue.
After you configure NProgress inside your navLink.addEventListener('click', ....
let currentUrl = window.location.href;
let newUrl = event.target.href;
If you refresh the page, and click on a link, the newUrl comes back as undefined. I have no idea why is that though.
Add console.log(currentUrl, newUrl) after you assign them to see it.
I was able to find this because the new function I added for anchors does new URL(newUrl) which fails because newUrl is undefined
see screenshot: https://prnt.sc/7PcLZPeovabN
First of all, thank you for your amazing work on this library.
I have a suggestion that I believe would enhance the functionality of the NextTopLoader component. Currently, it provides several props for customization, which is great. However, I would like to propose adding a new feature that allows users to pass arbitrary props to the NextTopLoader component.
The inspiration for this feature comes from the template option in the nprogress package. With the ability to pass custom props, users like myself, for example, could add attributes such as data-test-id, which can significantly help in testing scenarios. Having the ability to set a data-test-id would allow us to easily check if the component has completed its loading process during testing.
I believe this addition would make the NextTopLoader even more versatile and further improve its usability. I hope this suggestion resonates with you.
Thank you once again for your hard work and consideration of this proposal.
Hello,
I just discovered your solution.
Thanks for your work.
When I load my app and click on my navigation, toploader work like a charm, if I change page the loader work but after that when I change to another page, toploader never be displayed.
Thanks
Hello, just to report that on a project with the last Nextjs 14.0.3, the toploader keeps loading and never finish or completes.
But there aren't errors on console server/client.
As a workaround to get it working install 14.0.2
Thank you for this awesome library. I started using nextjs server actions.
Currently, the toploader does not appear when a server action is in progress. It would be awesome if that would work too.
Hello, I need help to apply zIndex for underlying nprogress css properties.
I am using material UI(MUI), so I am applying the css using theme and inside CssBaseline component with #nprogress as selector.
Do you know working example for applying styling?
As per the code of library default zIndex for loader and progress bar is 1031, While using this library with Material UI whose app bar is having the zIndex-1100, The loader and progress bar goes behind the App bar.
Adding a reference to this link -https://mui.com/material-ui/customization/z-index/
It would be very cool to see TopLoader at the bottom. Could be done like passing a boolean whether to show it at bottom or not.
Inside Client components when we use router.push('/someURL') the top loader finishes loading before the page entirely loads.
I want to hide the small semi-circle rotating in top-right corner. How can I do that ?
The reason to hide that is that it is not in best position and it just looks ugly
I did see this issue, but it has been closed and the problem is still here.
Seems like the ctrlKey didn't work for all of us.
Is there any other workaround ?
Nextjs - 13.4.6
nextjs-toploader - 1.6.4
Current behaviour -
When using with nextjs' Link component , it works fine in a regular navigation but when I provide "replace" prop to Link component to replace the current route with a new route, the progress bar animation continues indefinitely even after the route has been replaced and the page is completely rendered.
Expected behaviour -
The progress bar should complete the animation on successful navigation and stop the animation
It gets triggered here, any way to disable it?
<a href="https://nextjs.org" target="_blank" rel="noreferrer">Click it</a>
The following URL schemes make the progress bar stuck, even after successfully 'opening the link'
tel: URLsmailto: URLssms: URLshref="#" also makes it stuck, but your website shouldn't have an anchor with just # anyway so this does not need fixing.
Otherwise an amazing library, good job!
Considering this case:
When user open a link in a new tab using CTRL + Click, it should not trigger the animation.
for example, if its '#', disable it
It should ignore if the href="#", instead gets stuck
It throws an error on Safari 12.1, in both development and production. I also have a React lib that when transpiled used the ||= operator, which turns out was only supported in Safari 14.
It's probably the nullish coalescing you're using that isn't being polyfilled by tsup, since it's only supported by Safari 13.4 onwards.
A Next.js Top Loading Bar component made using nprogress, works with Next.js 14.
The readme describes what this (a loading bar), what's it build on top of (nprogress), and that it also works with Nextjs. It also explains various config options, although some of them would imho need some more details (e.g. crawlSpeed?)
Yet is doesn't explain how it is supposed to work. When does loading start? When should it stop?
My experience is that I installed this in my project, I see the progress bar starting when I click to navigate to a new page yet the page loads but the progress bar is still only halfway done. I also checked the network tab, no requests are happening in the background, yet the loading bar is still there -> this is weird.
So then I can't help but think: is this indented? is it not? do I need to change some setting? I don't know, the readme doesn't get into these details.
If I knew this info, I wouldn't mind making a PR where this kind of info is mentioned. Sadly I don't.
I don't want to show the progress bar if the page loads in under n milliseconds, seems unnecessary for pages that load very very fast (which is most of the time).
Is it possible to disable bar animation for a tags with '#' ?
I have updated my proejct ot Next 14 and I can not able to see toploader.
In app/layout.tsx
import { Toaster } from "@/components/ui/toaster";
import "@/styles/globals.css";
import type { Metadata } from "next";
import NextTopLoader from "nextjs-toploader";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<NextTopLoader height={500} zIndex={9999} color="black" />
<body>
{children}
<Toaster />
</body>
</html>
);
}
I have tried to make layout.tsx to a client component, it still not working.
Hi,
In a nested button inside a Link, if you call preventDefault, it does not prevent the animation.
<Link href={"/somewhere"}>
<button onClick={(e) => e.preventDefault()}>Hey</button>
</Link>Regards
Whenever I click on external links such as GitHub or LinkedIn, the toploader starts progressing and gets stuck at the end. I believe it shouldn't even start progressing when navigating to an external link. Here is the link of my website (https://www.waqarcodes.tech/)
Shouldnt it be devDependency?
The progress works well, but there is problem:
The progress bar will get stuck if I click link with the same route, for example:
If I'm in /contact , and I click again the Link with href="/contact", the progress bar showing again but get stuck
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.