Nested loader is called twice and has itself as a parent when parent loader resolves instantly

[Truevoly]

Reproduction

https://stackblitz.com/edit/vitejs-vite-avh6zm6f?file=src%2Fcomponents%2FChildPage.vue,src%2Floaders%2FhomeLoader.ts

Steps to reproduce the bug

1. Open reproduction link
2. Open console, each loader has a console.log statement at the top to see when each loader is executed.
3. Verify that on initial load "parent-page" loader is called twice
4. See that first loader is called twice
5. Add breakpoint at parentLoader
6. Uncomment line in ChildPage.vue.
7. Refresh the preview
8. See that parentLoader is called in infinite loop

Expected behavior

Each loader is only called once per navigation

Actual behavior

First loader is called twice. If line in child component is uncommented, first loader is called in infinite loop

Additional information

Setup includes a helper component that resolves a loader and provides slot with loaded data.
In my app, I have more than one child page, and so I've added simple caching to avoid refetching parent loader when navigating between them. This simple cache also persists when going back. If you remove caching and force it to reload every time, it will work as intended

[posva]

If you remove caching and force it to reload every time, it will work as intended

You are pretty much asking me to debug your custom loader component. If you want reliable cache, use [https://pinia-colada.esm.dev/](Pinia Colada). In your loader I see a loader passed as a prop and then invoked at mount and stored in a shallowRef. That's pretty convoluted so feel free to open a discussion and maybe somebody will help you debug it but my personal recommendation is to just use pinia colada

[Truevoly]

If you remove caching and force it to reload every time, it will work as intended

You are pretty much asking me to debug your custom loader component.

Fair enough, I've updated reproduction link and removed that custom component. The page components now use loaders directly. But the issue is still present.
There might be other reasons as to why data is returned from loader synchronously, not only cache.
And you still can get an infinite loop if you use two loaders in the same component. I do not see it as a dead lock, since parent loader does not call child loader.
I've also removed first async call in parent loader, now the issue is present even when you open the page.
So, the issue can be paraphrased as ""undefined" has itself as parent error" when using nested synchronous loaders

[posva]

Thanks, that's much clearer! There is indeed a bug because the useParentLoader() gets executed in the component before the .finally() gets to reset the context to empty. This only happens if all loaders are lazy