Nested loading states

[v-morlock]

Hi,

I'm enjoying remix a lot - one question regarding nested loading states.

When remix is doing client side transitions, and route loaders are slow, remix feels kinda unresponsive to me as the user has no indication that a load is taking place in the background. I've been experimenting with hiding the page content once loading takes place and showing a spinner by using "useNavigation" in the root component, but one problem i've encountered is that this also hides the full page if only a small nested part of the page (using nested routes/outlet) is loading.

I'd actually be looking for an api like "Suspense" where I can show a fallback UI for only the nested route that's in a client-side transition right now. Basically think of wrapping each "outlet" in a suspense - i couldn't find a way to extract this information from the data given by "useNavigation".

Is there any recommended way for doing this in remix? Or do you have other suggestions on good methods to counter this unresponsive feeling remix gives in such cases?

[lili21]

I've been experimenting with hiding the page content once loading takes place and showing a spinner by using "useNavigation" in the root component

you can do it in the parent route component instead of the root component.

[v-morlock]

Hi, thanks for getting back! That‘s true as long as you have only one outlet on the page where you want to apply this. I was experimenting with e.g. dialogs where the dialog lives in a nested route. When doing this, it would be preferable to only render a spinner within the dialog while the dialog is pending - however, I couldn‘t find a way to find out if the current useNavigatipn is the „most deep“ one in the tree. Any ideas?

[lili21]

all the nested route loader are loading parallel. so It's doesn't matter if useNavigation is most deep or not.

[lili21]

the thing you can do is put the useNavigation in you most deep route parent.

[lili21]

or you can use defer.

[lili21]

using defer in the most deep route, and you can use Suspense to handle the loading stuff.

[v-morlock]

Regarding your point on nested routes loading in parallel: My intention was to use custom revalidate conditions to prevent the "parent" loader to run again when the "child modal" route is opened - thus, the parent route would be untouched and only the appearing child route would need to animate in and show a loading spinner or sth similar

Another issue i encountered today: imagine you have three routes, two of them share a tabbar on top, another one has no tabbar. using the approach you mentioned, one would put one useNavigation in the tabbar-component and another one in the fullscreen-route-component, each of them displaying a loading animation when navigation is pending.
When switching between tabs, everything looks good, the tabbar stays persistent and the animation is shown. When navigating from fullscreen to tab, it also looks fine because the fullscreen spinner is engaging. However, when navigating from tabs to fullscreen, the spinner below the tabbar is engaging (visually suggesting another tab is being fetched) and then the navigation to the fullscreen route is triggered. This would also make something like skeleton loaders quite difficult to implement.

I think the general problem here is, that the navigation isn't performed until the loader data is fetched. I can see why this decision was made but i feel like it makes handling loading states really difficult and i would wish for something more suspense-like to handle this...

Maybe one way to achieve a similar effect would be to give the "Outlet" component a "fallback" property where one could provide a matching loading state. One could use defer in all the routes, however, I think especially for non-client-navigation / initial page loads, remix' current behaviour makes a lot of sense and is also way less effort to implement. Just when navigating on the client, due to the browser-progress-bar not engaging, it feels a bit unresponsive imo

[artpumpkin]

Hey @v-morlock, did you find an answer to this behavior? I just came up with the same scenario, I'm thinking of either changing the fallback from replacing the Outlet to just load in top of it so it doesn't feel weird, or see if I can detect the state where the child Layout is loaded first time so I won't let the parent Layout show a loading screen.

[h4ka]

I have the same problem currently. For example if I have a /users route that displays users list in a sidebar. once I click on a user list item I trigger navigation to a /users/{userId} route that should display user overview that has a link to user posts route /users/{userId}/posts. then I can navigate to a particular post /users/{userId}/posts/{postId} that shows the post content and comments. If I use useNavigation() and navigation.state === "loading" on each of the routes I only see the Spinner on the /users route and not on the userId or posts or postId routes. Instead of a Spinner for the postId for example. Await and Suspense is not an option for me as I resolve the data fetching in the router and use Either pattern to return a Success(with data) or an Error(with message) from the loader. I also have a list of the latest posts in the Users sidebar and if I select to navigate to a postId route my whole screen just freezes and waits for all the loaders to load their data and then render all the routes (they are on the same page). I tried searching for the solutions but couldn't find anything. Claude also hallucinating trying to provide the solution and just goes in circle providing non working slop lol. Anyone who has solved this problem already? I cannot be the only one who has this issue :(