[UI] Optimizing the homepage experience

[CodePrometheus]

Why

In development, I find that the UI takes a long time to load during the initial request due to the large number of resources being loaded. In my case, it took around 13+s as shown in the screenshot below. Similarly, for the online demo website, there is also a noticeable white screen time during loading.

How

• Using Vue-router for lazy loading of routes.
• To avoid white screens, use transition animations during loading.

What

The prototype diagram is as follows, an animation will be shown during the loading process, and the Dashboard will be accessed only after the loading is finished.

Are you willing to submit a pull request to implement this on your own?

• Yes I am willing to submit a pull request on my own!

Code of Conduct

• I agree to follow this project's Code of Conduct

[wu-sheng]

@Fine0830 Please take a look at this.

[Fine0830]

Can you submit a PR to resolve this issue? @CodePrometheus

[CodePrometheus]

Okay, if everything goes well I'll submit it tomorrow.

[wu-sheng]

A little suggestion, if you want to optimize UX, besides the loading sign, you should consider to updating the words when the loading sign shows up, such as(just for example, I don't know vue tech details)

1. Loading VUE framework
2. Loading Booster UI framework
3. Loading UI templates
4. Initialize the landing page
   ...

[CodePrometheus]

Vue tech stack may be not like java-spring or go-gin, but I know what you mean, thanks, I'll consider the details carefully.

[wu-sheng]

I can't tell whether this is tech possible, just thinking about this when you mentioned about UX.

[Fine0830]

Uh, I did not reproduce the issue about the page loading time being 13s+.

[CodePrometheus]

The production env is slightly better than the local situation, usually loading is completed within 4~5s, but there will still be a white screen during this period.

[Fine0830]

I think this is okay in the development environment and it's more valuable that if you can reduce white screen time in the production env.

[Superskyyy]

I confirm that the loading wait issue happens to me during development and deploy. Nice to see the ux getting improved over time.

Sometimes in github code spaces and gitpod it can take way longer than 13s stuck on a white screen.