feat: Add loading splash screen with LoadingBar component during app startup#1385
feat: Add loading splash screen with LoadingBar component during app startup#1385
Conversation
ivanslabbert
left a comment
ivanslabbert
left a comment
There was a problem hiding this comment.
update loading animation to be a "running slug", i.e. when the bar is filled from left to right, it starts emptying from left to right, and repeat.
|
Add query string paramater to singlecontent for SSG so splash does not appear |
… filled from left to right, it starts emptying from left to right, and repeat.
MrDirkelz
force-pushed
the
1014-app-add-loading-splash-screen-while-vue-app-is-being-loaded
branch
from
ab59936 to
8adee24
Compare
| /** | ||
| * True while the app's Startup function is still running. Used to display the loading splash screen. | ||
| */ | ||
| export const isAppLoading = ref( | ||
| !new URLSearchParams(window.location.search).has("nosplash"), | ||
| ); |
There was a problem hiding this comment.
Isn't another to check that the app is loading ?
| app.use(router); | ||
| app.use(i18n); | ||
| app.mount("#app"); | ||
| isAppLoading.value = false; |
There was a problem hiding this comment.
Please check that won't create sequencing issue ?
There was a problem hiding this comment.
This flag can't cause sequencing issues, it's just a notifier to the splash screen that is set before we init to true, then here reset to false, the init function is mostly asyncronous, so this won't run contrary to anything
| } | ||
| isDarkTheme.value = document.documentElement.classList.contains("dark"); | ||
| }; | ||
|
|
There was a problem hiding this comment.
Why do we need this ? Is there a specific reason ?
There was a problem hiding this comment.
The splash lives outside the scope of the loaded app (before vue was loaded)
There was a problem hiding this comment.
Check your prettier code ?
ivanslabbert
left a comment
ivanslabbert
left a comment
There was a problem hiding this comment.
Add the URL query parameter needed to bypass the spash screen (needed for SSG). Remember to document it with the other URL query params
| */ | ||
| export const isDarkTheme = ref(document.documentElement.classList.contains("dark")); | ||
|
|
||
| const systemThemeQuery = window.matchMedia("(prefers-color-scheme: dark)"); |
There was a problem hiding this comment.
Add a comment on why we need this
4 participants
No description provided.