[FE] - Glitch between login and monitor page

[marcelluscaio]

Describe the bug
After we login, we can see the login page for about half a second. That seems to be happening because of the protectedRoute component. It needs to get the auth information from redux, and that takes a while since it was recently updated.

To Reproduce
Logout. Open the performance tab on devtools, and record. Login, and when monitor page appears, stop recording. See there is a glitch between login and the monitor page.

Expected behavior
It should provide some sort of loading, and then navigate to the page.

Additional context
I believe there are two things to be done: on the login page, we can add a loading state while user information is not updated, before redirecting.
Also, we could provide a loading state while user is undefined in protectedRoute, for about two seconds. That path may never be reached with what we set in the login phase, but it would be an extra layer of protection

[crunchydosa123]

Hi, is this taken?

[gorkem-bwl]

Nope, go ahead please. Before starting, write how you are going to implement it.

[crunchydosa123]

I will start with the suggestion given on your description for this issue. Any notes for cloning the repo and running on localhost?

[gorkem-bwl]

I will start with the suggestion given on your description for this issue. Any notes for cloning the repo and running on localhost?

All the details are in our readme.md file, which also has a section that links to our documentation.

[gorkem-bwl]

@crunchydosa123 let me know if you are moving forward with this issue. Thanks.

[crunchydosa123]

Yes

[crunchydosa123]

hey, while trying to replicate the issue, do i need to run the docker containers for backend as well? or is there a way i can simulate it by running using just vite? I am unable to login using just the frontend of course and was wondering if there's another way to go about it in development

[marcelluscaio]

I think it's best if you run the whole project. I don't think you'll be able to login without a backend