loading.tsx not showing up after router.push
Unanswered
Ghost ant posted this in #help-forum
Ghost antOP
Hi all! I like to create a ui with a loading indicator. I try to use the loading.tsx file in the app directory. The page is an async component with an await and i use the queryString as a filter input for some db request (not fetch but prisma). And in the layout.tsx i have a <SearchBar /> component and it can update the queryString with router.push. The flow is working, but the ux is horrific :/ The loading screen never shows up again, and i tested the app with slow internet and it has a very bad ux. No loading screen just wait wait and after a couple of seconds the items just appear. What i miss? It should work? Or i have to use full client side components for this?
2 Replies
Ghost antOP
I use latest next 14.0.3
Ghost antOP
Hi all, i figured it out but i think this is just a workaround not the fully solution. From user perspective i think now its better but as a developer i think i expected a bit more. The solid-start already do this better but i understand this is very hard thing and i started to dig myself deep into the source code and maybe i can help figure out something. The method i use now for this is a server side action with a simple redirect to the same page with new query string. Its snappy works fine. The loading.tsx showing as i expected and the ux is better because of the internal cache but still. It has to reload the whole page. With streaming i can't solve this. If you have any advice pls share with me, because i choose nextjs all time time for my projects and i like this platform, i just feel something is still missing or i missing something key point