UI - Add Loading State

[dimak1]

• No Loading Panel/spinner when the UI loads for the first time.
• No indication of work being done;
• the application "freezes" and gives no indication of ongoing processes.

UX/UI Link: https://www.figma.com/design/R9GF5wvwq2TrnbnsbhPfvV/STR-Application-Tickets?node-id=6681-14210

[mbertucci]

Need a design for a loading indicator

[mbertucci]

Throughout the application.
Alexis to provide a few loading states.

1. When application is loading
2. Trying to make a payment and waiting to go to next page - the payment screen and then after the payment is successful.
3. Any submission of data

[fionazhou-jsb]

@mbertucci is ok with the design Alexis proposed. @andybcgov if you are ok with it, can you move it to design complete? Thx

[dimak1]

Ready for UXA: https://strr-ui-dev--pr-170-sefmeju5.web.app/ @andyyanggov

[andyyanggov]

The loading modal shifts slightly in position as the page loads, which I find a little jarring. Also, I'm not sure if the forced redirect from the dashboard is intentional (for testing purposes?) or a bug. It's happening in DEV, too.

[dimak1]

Thanks for review @andyyanggov

1. Shift to the left is due to the scroll bar, which appears and shifts the content to the left. I can try to reduce/remove the animation once the page is loaded, so the loading modal will almost instantly disappear (if that makes it look better).
2. For the redirect, if there are no applications/registrations in the Dashboard, it redirects to the rental registration page. It could change if you want.

[andyyanggov]

Thanks for the explanations @dimak1

1. We can try it, but it's not a big deal if it's a lot of work to fix.
2. I thought we have an empty state for the dashboard. The forced redirection feels to me like an unexpected behaviour. Sorry, it's not part of the scope of this ticket, we can chat about it offline.

[andyyanggov]

Tested again. Loading modal no longer shifts to the left. LGTM.

[dimak1]

@rstens PR is merged and should soon be available in Dev. Thanks!

[rstens]

Passed

Tested:

Using: https://www.debugbear.com/blog/chrome-devtools-network-throttling to slow down the browser network and therefore make the loading state more visible. Thanks Dima for tip!

• [x] When application is loading
• [x] Trying to make a payment and waiting to go to next page - the payment screen and then after the payment is successful.
• [x] Any submission of data

Even with the slower network, it is hard to see, but the "Loading.." pages are there.