6x reduced CPU cause lazy routes failing during loading or navigation

[maksymskuibida]

Describe the bug

I am facing an issue on admin panel I am developing now. Sometimes, I cannot find exact steps to reproduce it just returns nothing in Outlet. I checked all my code tree and there is no chance it is bug in my code. Then I reload the page and then I am facing the next issue. beforeLoad of my $lang route is called before __root.tsx beforeLoad what causes other bugs

Your Example Website or App

admin.7loc.com

Steps to Reproduce the Bug or Issue

If you want, you can

1. register here,
2. create profile in form
3. Navigate between pages on phone or with efficiency slowed down x6 + mobile mode in devtools

Expected behavior

1. When I am on some route, and there is some content, Outlet have to return it always
2. __root.tsx beforeLoad should be called before other routes beforeLoad as well, as any parent beforeLoad should be called before beforeLoad of any children

Screenshots or Videos

No response

Platform

• OS: It happens more often on phone or if I slow dows processor x6 in browser devtools
• Browser: all
• Version: 1.30.1—1.31.2

Additional context

No response

[tannerlinsley]

Please try with the latest version Tanner Linsley

…

On Apr 29, 2024 at 10:52 AM -0600, Maksym Skuibida ***@***.***>, wrote: Describe the bug I am facing an issue on admin panel I am developing now. Sometimes, I cannot find exact steps to reproduce it just return nothing in . I checked all my code tree and there is no chance it is bug in my code. Then I reload the page and then I am facing the next issue. beforeLoad of my $lang route is called before __root.tsx beforeLoad what causes other bugs Your Example Website or App admin.7loc.com Steps to Reproduce the Bug or Issue If you want, you can 1. register here, 2. create profile in form 3. Navigate between pages on phone or with efficiency slowed down x6 + mobile mode in devtools Expected behavior 1. When I am on some route, and there is some content, Outlet have to return it always 2. __root.tsx beforeLoad should be called before other routes beforeLoad as well, as any parent beforeLoad should be called before beforeLoad of any children Screenshots or Videos No response Platform • OS: It happens more often on phone or if I slow dows processor x6 in browser devtools • Browser: all • Version: 1.30.1—1.31.2 Additional context No response — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[maksymskuibida]

1.31.2 is last available version. I am currently on it and it also happens.
As __root beforeLoad is called before my $lang's beforeLoad when I try to use variable from context, which I return from __root beforeLoad, it is undefined. I use this variable to change lang in params, if it was changed, for example, in user object. So, I set undefined to params, what causes infinite pending state. I reload page, undefined is replacing to actual lang, but I don't know why it also falls into infinite pending and only if I reload the page for third time, it starts working. I fixed it a little bit by checking if (variable) in $lang beforeLoad, so now when Outlet returns nothing, I reload the page and it works from first reload, but the issue with calling other routes beforeLoad before __root beforeLoad still exists. And issue with Outlet returns nothing still exists.

Anyway thank you for your hard work on this project. You are doing a lot and present fixes so quick. I beleive issues will be fixed soon, because without this bugs it is perfect router

[BourqueCharles]

@maksymskuibida By any chance, are you using redirects in your beforeLoad? I had an issue similar to your's and changing the redirect function to using the navigate function "fixed" those issues.

[maksymskuibida]

@BourqueCharles Yes, I am. But this issue happens when I do no redirects. It is interesting, but on my mac it happened may be one or two times. But on my phone in happens almost every time I just navigate between my pages. Outlet returns nothing, so, I see only my layout, but content of current page is empty, I reload the page, and than I am facing an issue that __root beforeLoad called later. My __root beforeLoad returns computedLang, and $lang route have to redirect for it, if it is different from current. For example, if user changed language somwhere else, or somebody followed incorrect link with something incorrect instead of lang. The reason why I compute lang there is because I also use it in not found route(if somebody follows just admin.7loc.com link). I fixed id by checking for a value before redirect and also I could try to make some function for it and instead of using context, call function (which fetches data using query from backend, like user, to obtain current language). Now I am checking for a value and it works fine

But it is still not OK, that

1. Outlet returns nothing
2. __root beforeLoad is called after routes beforeLoads.

[alexhanga]

https://stackblitz.com/edit/github-shdycb-6awa91?file=src%2Froutes%2Findex.tsx

1. Try to open a page, see the url change, but no content
2. Reload page. See the correct content

[alexhanga]

@tannerlinsley This bug is related to situation that current route / can be used as a layout for new route, so it is not unmounted and router doesn't understand that it should change the layout.

After the page reload router understands that it should use different layout and doesn't use route from /

[maksymskuibida]

@tannerlinsley @SeanCassiere My issue is still not fixed. It is not redirects in my case, issue was incorrectly renamed. It is just Links. I press on link and outlet renders nothing. My layout route is rendered, but routes under it is not. And it happens only on my phone or if I slowdown performance x6. I just navigating by links in my sidebar

Sequence.01.mp4

[maksymskuibida]

Also it happens only one time per route per page load. So, I reloaded the page. After it every route have this issue. But if I press second time for same route, or press, for example categories and then go back to stores issue also disappears

[maksymskuibida]

I also tried to remove almost all content for this pages, leave just background and HELLO WORLD and the issue still exists. But it exists only with CPU slowdown x6 and on my phone (samsung a54). It also exists with CPU slowdown x4, but more randomly