loading.tsx isn't triggered after useRouter.push
Unanswered
Sun bear posted this in #help-forum
Sun bearOP
Hello. I'm trying to create a page that loads a list of products as well as an aside menu with filters.
Selecting filters affects query params and I originally wanted to fetch products on server side (page.tsx) according to searchParams.
When the page is initially loaded, everything works as expected: loading.tsx renders the skeleton and products are added after on. But when new filters are selected, I run useRouter.push in order to change query params and request filtered products from page.tsx. It also works but for some reason loading.tsx isn't triggered so the page is like stuck for a few seconds.
Am I doing things the right way? Which direction should I go to resolve this?
Selecting filters affects query params and I originally wanted to fetch products on server side (page.tsx) according to searchParams.
When the page is initially loaded, everything works as expected: loading.tsx renders the skeleton and products are added after on. But when new filters are selected, I run useRouter.push in order to change query params and request filtered products from page.tsx. It also works but for some reason loading.tsx isn't triggered so the page is like stuck for a few seconds.
Am I doing things the right way? Which direction should I go to resolve this?
4 Replies
Loading.tsx only works on page transition
Use usestate anr create a loading state for your component
Use usestate anr create a loading state for your component
@lakshaykamat Loading.tsx only works on page transition
Use usestate anr create a loading state for your component
Sun bearOP
which means i'd fetch products on both server and client sides. the logic would kinda repeat. is there really no other way to solve this?
@Sun bear which means i'd fetch products on both server and client sides. the logic would kinda repeat. is there really no other way to solve this?
It doesn't effect your application nextjs dedupe all requests
Sun bearOP
@lakshaykamat okay, i'll try that. but how do i change query parameters when filters are changed without requesting page.tsx again? useRouter.push triggers page.tsx to rerun