Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create initial app loading screen #1822

Closed
taoeffect opened this issue Jan 25, 2024 · 2 comments · Fixed by #1825
Closed

Create initial app loading screen #1822

taoeffect opened this issue Jan 25, 2024 · 2 comments · Fixed by #1825
Assignees
Labels
App:Frontend Kind:Enhancement Improvements, new features, performance upgrades, etc. Note:UI/UX Priority:High

Comments

@taoeffect
Copy link
Member

Problem

In PR #1521, to address #1765, @corrideat added this v-if to the router in frontend/index.html:

<router-view v-if="ephemeral.ready" class="l-page"></router-view>

This causes a blank white page to appear on initial page load for a bit.

Solution

Create a v-else and set it to a page that shows a simple loading page to indicate that the app is loading.

Create a branch off of master (by the time you see this issue Sebin, e2e-protocol should be merged)

@taoeffect taoeffect added Kind:Enhancement Improvements, new features, performance upgrades, etc. App:Frontend Priority:High Note:UI/UX labels Jan 25, 2024
@SebinSong
Copy link
Collaborator

Hey @taoeffect @corrideat,
it's just a question out of curiosity but why did ephemeral.ready need to be set up this way (below) instead of definitng it in data () { ... } block and then doing this.ephemeral.ready = true?

...
}).finally(() => {
  Vue.set(this.ephemeral, 'ready', true)
})
...

@taoeffect
Copy link
Member Author

@SebinSong That's a good question. While I can't speak for @corrideat I think there's no reason why you couldn't do it that way. In fact I think that would be better as it's more idiomatic.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
App:Frontend Kind:Enhancement Improvements, new features, performance upgrades, etc. Note:UI/UX Priority:High
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants