Search
Setup for Free
TTC
Theo's Typesafe Cult
Top Progress Bar | App router
Original message was deleted
Theo's Typesafe Cult
Join
26,230
Members
View on Discord
Similar Threads
© 2026 Hedgehog Software, LLC
Twitter
GitHub
Discord
System
Light
Dark
More
Communities
Docs
About
Terms
Privacy
Similar Threads
Top loader bar | App Router
TTC
Theo's Typesafe Cult / questions
2y ago
app router
TTC
Theo's Typesafe Cult / questions
3y ago
Progress bar in Vs code terminal
TTC
Theo's Typesafe Cult / questions
3y ago
does uploadthing have a progress bar?
TTC
Theo's Typesafe Cult / questions
3y ago
Y
Y7YA
•
1/9/24, 12:54 AM
Upon further research looks like there
's no non
-hacky solution for the app router
. Solved with the
nextjs-toploader
nextjs-toploader
package
.
Y
Y7YA
•
1/9/24, 12:58 AM
But now running into the annoyance of the bar showing on every single route change even if the route load is instantaneous from cacheing
.
Y
Y7YA
But now running into the annoyance of the bar showing on every single route chan...
F
fl0w†
•
1/11/24, 7:28 AM
You could use this
https://www.npmjs.com/package/nprogress
to
„trigger
“ the toploader yourself and just not trigger it if the site is cached or whatever
npm
nprogress
Simple slim progress bars
. Latest version
: 0
.2
.0
, last published
: 9 years ago
. Start using nprogress in your project by running
npm i nprogress
npm i nprogress
. There are 2568 other projects in the npm registry using nprogress
.
F
fl0w†
You could use this https://www.npmjs.com/package/nprogress to „trigger“ the topl...
Y
Y7YA
•
1/11/24, 11:11 AM
How do I check if the site has been loaded before though
? not very clear in the nextjs docs
F
fl0w†
•
1/11/24, 11:55 AM
I also didn
’t find a good result but try to only trigger the loader if the page takes longer than
… seconds to load
Y
Y7YA
How do I check if the site has been loaded before though? not very clear in the ...
F
fl0w†
•
1/11/24, 11:59 AM
try that
F
fl0w†
try that
Y
Y7YA
•
1/11/24, 12:00 PM
how can I try that without knowing how to check if a page is already loaded
Y
Y7YA
•
1/11/24, 12:01 PM
i
've already tried nprogress before doesn
't fix the fact I need to know when a page is loaded to stop it from triggering
F
fl0w†
•
1/11/24, 12:03 PM
can
’t you just check if a component is mounted and use that to check if the page is done loading
?
Y
Y7YA
But now running into the annoyance of the bar showing on every single route chan...
K
kdiffin
•
1/11/24, 1:58 PM
i gotchu
K
kdiffin
•
1/11/24, 2:00 PM
https://github.com/approximant/next-progress
GitHub
GitHub - approximant/next-progress
Contribute to approximant
/next
-progress development by creating an account on GitHub
.
K
kdiffin
•
1/11/24, 2:00 PM
@Y7YA
K
kdiffin
@Y7YA
Y
Y7YA
•
1/11/24, 2:01 PM
thanks will try it out
K
kdiffin
i gotchu
Y
Y7YA
•
1/12/24, 8:04 AM
package seems completely broken doesn
't work
Y
Y7YA
•
1/12/24, 8:09 AM
looks like a non
-app router solution
Y
Y7YA
package seems completely broken doesn't work
F
fl0w†
•
1/12/24, 8:19 AM
there
’s one fork with some changes
, you could try this one
https://github.com/Audiu/next-progress
GitHub
GitHub - Audiu/next-progress
Contribute to Audiu
/next
-progress development by creating an account on GitHub
.
F
fl0w†
•
1/12/24, 8:19 AM
no guarantee that it works though
Y
Y7YA
looks like a non-app router solution
K
kdiffin
•
1/12/24, 8:33 AM
Ok mb
F
fl0w†
there’s one fork with some changes, you could try this one https://github.com/Au...
Y
Y7YA
•
1/12/24, 8:59 AM
yeah already tried it also doesn
't support app router
Y
Y7YA
•
1/12/24, 8:59 AM
kinda crazy how there
's no solution for this
Y
Y7YA
•
1/12/24, 9:00 AM
fake loading bar on top makes the page feel slower even though its instant
Y
Y7YA
yeah already tried it also doesn't support app router
F
fl0w†
•
1/12/24, 9:06 AM
hmmm
.
. that
’s unfortunate
nextjs-toploader
nextjs-toploader
npm i nprogress
npm i nprogress
Y
F
K
