-
Notifications
You must be signed in to change notification settings - Fork 153
Open
Description
When calling loadingScreen.finish() with no arguments, the loading screen will always be visible for at least 1300 ms even if your application loads instantly. This makes your application feel slow when it's really not!
Reproduction
https://github.com/srmagura/please-wait-is-slow
Workaround
Call finish(true) to hide the loading screen as soon as possible.
Recommended solution
Make your own loading screen. You really don't need a library for this. Here's mine if you need inspiration:
<style>
@keyframes loadingScreenImageFadeIn {
from { opacity: 0 }
50% { opacity: 0 }
to { opacity: 1 }
}
@keyframes loadingScreenTextFadeIn {
from { opacity: 0 }
66% { opacity: 0 }
to { opacity: 1 }
}
</style>
<div id="loadingScreen" style="position: absolute; background-color: white; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; top: 0; z-index: 10000;">
<div>
<img src="/images/logo.png" alt="My Company" style="animation: loadingScreenImageFadeIn 2s ease-in; margin-bottom: 3rem" width="250">
<div style="animation: loadingScreenTextFadeIn 3s ease-in; font-size:1.5rem; color: #888; font-family: sans-serif; text-align: center">Loading...</div>
</div>
</div>Then when your application finishes loading:
document.getElementById('loadingScreen')?.remove()Metadata
Metadata
Assignees
Labels
No labels