Can you show toasts from loaders using a Link

[MattyBalaam]

I have noticed the toasts do not show if you navigate to a page with a Link component because it does not seem like the root loader re-runs. Is this correct?

Example repo: https://github.com/MattyBalaam/remix-toast-loader-test

My use case is to show a toast message if some low-priority api data resources do not load.

[MattyBalaam]

Hmm, so I can do this by passing in reloadDocument but I don’t really want to do it that way because it loads everything, not just loader data.

[MattyBalaam]

I wondered if single-fetch might be the answer, here - but it seems to be even odder…

It now seems to call the root on every load, but now it appears to call the last toast, not the current one 🤯

https://github.com/user-attachments/assets/8cddd0fd-eebf-4205-ab92-0bf3fad87fa4

EDIT: I guess that makes sense because the root loader runs first, so the new toast has not been set 🤔

[AlemTuzlak]

Root re-runs under certain conditions, not all of em, page navigations do not always trigger it, I think if you DON'T have a loader on the page you're navigating to it doesn't re-trigger

[MattyBalaam]

In this case (see example) all routes have a loader… but the root loader does not run in classic mode with client-side navigation, and in single fetch it seems like the root loader runs first so it gets the previous toast!

I’m struggling to think how this could work and it feels like reading the loaderData in each route component and triggering the notification that way is the only solution to this problem.

[AlemTuzlak]

well another thing you could do is add an onClick handler to the Link component, eg:

<Link to="/somewhere" onClick={() =>showToast()} />

[MattyBalaam]

In our case we are showing toasts based on responses to APIs called in the loader, e.g. a 404 error calling a resource. This feels like an unsolvable problem with the session flash approach