Is there useNavigation in next js.
Answered
Seppala Siberian Sleddog posted this in #help-forum
Seppala Siberian SleddogOP
Is there a way that's equivalent to
import { useNavigation } from 'react-router-dom'
const navigation = useNavigation();
{ navigation.state == "loading" ? <TopBarProgress /> : <Outlet /> }Answered by B33fb0n3
thats a good point. I guess it's the best to handle whatever you handle clientside to have an active loading state. Else do it like we mentioned with a top loader. If you need an example for a top loader (and a button) take a look at youtube: search something and press the search button
16 Replies
Dogo Argentino
This library can help you:
https://www.npmjs.com/package/next13-progressbar
https://www.npmjs.com/package/next13-progressbar
@Seppala Siberian Sleddog Is there a way that's equivalent to
tsx
import { useNavigation } from 'react-router-dom'
const navigation = useNavigation();
{ navigation.state == "loading" ? <TopBarProgress /> : <Outlet /> }
There isn't any directly. You can use a bunch of different libraries to determine if the user currently beeing redirected/navigated to somewhere, but for me the easiest solution was:
https://www.npmjs.com/package/nextjs-toploader
It works perfectly in server and client components, it matches your theme and has some other cool customizables
https://www.npmjs.com/package/nextjs-toploader
It works perfectly in server and client components, it matches your theme and has some other cool customizables
@B33fb0n3 There isn't any directly. You can use a bunch of different libraries to determine if the user currently beeing redirected/navigated to somewhere, but for me the easiest solution was:
https://www.npmjs.com/package/nextjs-toploader
It works perfectly in server and client components, it matches your theme and has some other cool customizables
Seppala Siberian SleddogOP
But I can't access that state so I can't use my custom loaders I can only adjust the navbar?
@Seppala Siberian Sleddog But I can't access that state so I can't use my custom loaders I can only adjust the navbar?
you can adjust the loading bar, yes. Like colors, thickness, ...
Seppala Siberian SleddogOP
But my use case actually that there is a button that I need to show a loading indicator on it 😅
@Seppala Siberian Sleddog But my use case actually that there is a button that I need to show a loading indicator on it 😅
What runs inside the background when the user clicks the button? Only browser redirect? API call? … what?
@B33fb0n3 What runs inside the background when the user clicks the button? Only browser redirect? API call? … what?
Seppala Siberian SleddogOP
it just updates the params but once the params are updated there is a server API call
Then you can make the button as loading initially (during the SSR request) and set it also as loading when it’s clicked. Like that it should always load while navigating. No need for an extra library
@B33fb0n3 Then you can make the button as loading initially (during the SSR request) and set it also as loading when it’s clicked. Like that it should always load while navigating. No need for an extra library
Seppala Siberian SleddogOP
and when should I disable it?
@Seppala Siberian Sleddog and when should I disable it?
thats a good point. I guess it's the best to handle whatever you handle clientside to have an active loading state. Else do it like we mentioned with a top loader. If you need an example for a top loader (and a button) take a look at youtube: search something and press the search button
Answer
@B33fb0n3 thats a good point. I guess it's the best to handle whatever you handle clientside to have an active loading state. Else do it like we mentioned with a top loader. If you need an example for a top loader (and a button) take a look at youtube: search something and press the search button
Seppala Siberian SleddogOP
yeah, I know but it's a client requirement not my decision actually 😅
@Seppala Siberian Sleddog yeah, I know but it's a client requirement not my decision actually 😅
that the button should trigger the page redirect (param change) and the state of the button should still be loading? Tell him, thats impossible due to the redirect & the new request to the server
@Seppala Siberian Sleddog solved?
@B33fb0n3 <@601748970875650069> solved?
Seppala Siberian SleddogOP
I think so, thanks