nextjs-toploader
nextjs-toploader copied to clipboard
TheSGJ
NextTopLoader stopped working on Nextjs 14.0.3
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
Same here. the progress bar is stuck at the end and never finishes loading since NextJS 14.0.3.
It also looks less snappy, if that makes sense. At the time where it previously completed loading, it now goes to around at 60-70% progress and slowly crawls its way to the end, but doesn't stop loading.
Next js 14.0.3 added experimental support for history.pushState and history.replaceState. That's why it's messing with history.pushState() method in the code. Here's the pr which introduced it: vercel/next.js/pull/58335
import type { Metadata } from 'next';
import './globals.css';
import { ReactNode } from 'react';
import NextTopLoader from 'nextjs-toploader';
import AppWrapper from './AppWrapper';
export default function RootLayout({
children,
}: Readonly<{
children: ReactNode;
}>) {
return (
<html lang="en" className="antialiased">
<body>
<NextTopLoader
color="hsl(var(--secondary-light))"
initialPosition={0.08}
crawlSpeed={200}
height={3}
crawl
showSpinner
easing="ease"
speed={200}
shadow="0 0 10px hsl(var(--secondary)),0 0 5px hsl(var(--secondary-light))"
template='<div class="bar" role="bar"><div class="peg"></div></div>
<div class="spinner" style="top: 65px" role="spinner"><div class="spinner-icon"></div></div>'
zIndex={999999}
/>
<main>
<AppWrapper>{children}</AppWrapper>
</main>
</body>
</html>
);
}
Possible fix: run NProgress.done() inside your top level client component, this will cleanup any stuck loader
import * as NProgress from "nprogress";
useEffect(() => {
NProgress.done();
}, [pathname, router]);
Possible fix: run NProgress.done() inside your top level client component, this will cleanup any stuck loader
import * as NProgress from "nprogress"; useEffect(() => { NProgress.done(); }, [pathname, router]);
This works for now. Hopefully the proper fix will come soon :)
Possible fix: run NProgress.done() inside your top level client component, this will cleanup any stuck loader
import * as NProgress from "nprogress"; useEffect(() => { NProgress.done(); }, [pathname, router]);
why root layout client-side rendering? I hope it is not good practiche
Possible fix: run NProgress.done() inside your top level client component, this will cleanup any stuck loader
import * as NProgress from "nprogress"; useEffect(() => { NProgress.done(); }, [pathname, router]);why root layout client-side rendering? I hope it is not good practiche
@besufkadmenji is only talking about your top most client component not root layout client side rendering. If this is your root layout, fine. For me it is not but instead two or three pages that are the top most client components.
Possible fix: run NProgress.done() inside your top level client component, this will cleanup any stuck loader
import * as NProgress from "nprogress"; useEffect(() => { NProgress.done(); }, [pathname, router]);
Yep this worked for me. But we need proper fix. Thanks for suggesting.
Also facing problem with nextjs 14. I am still using it because there is no such alternative to it. All other all manual.
Possible fix: run NProgress.done() inside your top level client component, this will cleanup any stuck loader
import * as NProgress from "nprogress"; useEffect(() => { NProgress.done(); }, [pathname, router]);
Thank you so much!
I added it at the top of my <Providers> component.
My root layout looks like this:
<html lang={language} dir={dir}>
<body>
<div>
<Providers locale={language}>
<NextTopLoader {...} />
{children}
// ...
So that's a really good workaround, imo.
Potentially will be fixed by https://github.com/vercel/next.js/pull/58861
@ajsystem , I checked the latest Nextjs v14.0.4. and nextjs-toploader works fine in that version. I think this issues should be closed now
@ajsystem , I checked the latest Nextjs v14.0.4. and nextjs-toploader works fine in that version. I think this issues should be closed now
let see what other people opinions first, just to make sure before it's closed😉
@ImamAlfariziSyahputra @Super-Kenil Yep issue is fixed in v14.0.4 for my app expense.fyi
@ImamAlfariziSyahputra . I had already tested it in 3 of my projects, then I commented here. @gokulkrishh thanks for confirming
Still experiencing the stuck loader when its 99% done. This is happening specifically when using the custom useRouter solution from this issue: https://github.com/TheSGJ/nextjs-toploader/issues/10#issuecomment-1809417610
"next": "^14.0.4"
"nextjs-toploader": "^1.6.4"
"nprogress": "^0.2.0"
my solutions
// NextTopLoader.tsx
'use client';
import Loader from 'nextjs-toploader';
import { usePathname } from 'next/navigation';
const NextTopLoader = () => {
const pathname = usePathname();
useEffect(() => {
NProgress.done();
}, [pathname]);
return (
<Loader />
)
}
// useRouter.ts
import { NavigateOptions } from 'next/dist/shared/lib/app-router-context.shared-runtime';
import { useRouter as useNextRouter, usePathname } from 'next/navigation';
import { useCallback } from 'react';
import NProgress from 'nprogress';
export const useRouter = () => {
const router = useNextRouter();
const pathname = usePathname();
const replace = useCallback(
(href: string, options?: NavigateOptions) => {
href !== pathname && NProgress.start();
router.replace(href, options);
},
[router, pathname],
);
const push = useCallback(
(href: string, options?: NavigateOptions) => {
href !== pathname && NProgress.start();
router.push(href, options);
},
[router, pathname],
);
return {
...router,
replace,
push,
};
};
