Add initial loading-screen to index.html

[SebinSong]

closes #1822

@taoeffect
I thought I would try using the existing screen in the app, which is Loading.vue with adding a GI logo in it like below screenshot. The logo will only be exposed there when the component is used as the initial loading screen btw.

If you have a more interesting idea for it though, let me know. happy to work on that.

[taoeffect]

Hmm, I'm not seeing the loading screen... 🤔

Notice the blank white page after refresh is clicked (this in FFDev):

loading.missing.mov

[cypress]

Passing run #1847 ↗︎

0

110

8

0

0

Details:

Merge 3aa4fb8 into 7233a5c...
Project: group-income	Commit: 5658ee1085 ℹ️
Status: Passed	Duration: 11:15 💡
Started: Feb 2, 2024 3:12 AM	Ended: Feb 2, 2024 3:24 AM

Review all test suite changes for PR #1825 ↗︎

[SebinSong]

@taoeffect I see.
I just looked into it again and that blank white screen shows regardless of the value of ephemeral.ready. In fact, it is when even before the Vue application is initialised. So if we are aiming to replace it, apparently it has to be handled outside of the Vue context. (e.g. adding raw html/css to the index.html) does it sound good?

[taoeffect]

I'll reply on Slack

[SebinSong]

@taoeffect
here is the screenshot for the proof.

[snowteamer]

This will minimize the element so that it becomes a single pixel wide. Why couldn't it be removed instead, or its display set to none? I think a clarifying comment would be useful here

[SebinSong]

@snowteamer I think it makes sense to remove it completely instead of hiding it if there is no other cases that the app needs to display this loader screen.

[SebinSong]

@taoeffect
I spent some time re-ordering the existing operation steps in startApp() in main.js so that Vue app initialisation happens faster. that did reduce little bit of loading time but what I noticed instead during the process was that, the browser is still waiting a long list of javascript files for the most time when that white blank screen is showing (will attach a video recording for this in Slack).
So I decided that the loading animation has to be an element that is part of index.html instead of being rendered as a Vue component. I tried to make it as minimal as I can in favor of this opinion of yours in Slack.

In SPAs, index.html is treated as a blank loader usually. In other words, it should be small and uncluttered.

Hope that looks good for you too.

[taoeffect]

Interesting approach @SebinSong!

When I loaded a previously loaded session (after starting FFDev), I was greeted with the following:

So there are 2 bugs here:

1. Vue correctly complains about <loading> component not being defined as part of the components of App.vue in main.js
2. The loading screen covers this prompt that is supposed to appear when quitting grunt dev and restarting it while there was an existing user+group:

To reproduce, create a group, then restart grunt dev and refresh the page after grunt dev fully loads.

[taoeffect]

Great work @SebinSong - seems like all of the issue were fixed!

Only thing is, some debug console.log statements were still left in the PR. Once those are removed I can merge!

[SebinSong]

@taoeffect my bad on all those console.log :)
Updated again.

[taoeffect]

Nicely done @SebinSong!

With some more testing I noticed an issue I didn't notice before.

If you perform a refresh it always redirects to the dashboard. For example, if you are viewing the general chatroom and refresh, it takes you to the dashboard still.

However, this seems to be an issue on master too, not just this PR, so I'll go ahead and approve and then open a new issue.