the goal is to have a very generic loading state on pages so that users gets immediate feedback always when clicking links, which they currently don't with my single top level loading.tsx

maybe template?

since it receives unique key, it will remount every navigation so you can display some loader for given amount of times, still it won;t check if ur data is ready

wrap all your pages with a suspense wrapper

why display loading state when user can get data instantly?

maybe it's actually better to do it on the page level, hmm. Somehow seems less cumbersome than copying a bunch of loading.tsx files everywhere 🙂

my main goal is to just show some loading state instantly though, and then add granularity and page specific loading states later

the template approach scares me a bit, seems like it has wide reaching consequences where all children are reset due to the key always changing. And I suppose maybe that's valuable insight as to why Next actually doesn't work like that...

that's the idea - some of our pages takes a second or so to load, as they load a lot of data and are used relatively infrequently. But the user should get instant feedback

looking into useLinkStatus, tnx!

seems like useLinkStatus only works when used as a child of the actual link and cannot be used to show "global" loading state

could always cook something up myself ofc...

"they load a lot of data"
yeah this is where i would say to use caches to temporarily store datas in nextjs server

"used relatively infrequently"
if data cache is not really appropriate for infrequent updates, then may want to look into static page caches (with isr)

"only works when used as a child of the actual link and cannot be used to show "global" loading state"
can always display top-level CSS based on the existence of child elements

or ReactJS using useContext to do something with parent

I already have a component that wraps all links, so that seems like it might be the way to go 🙂