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()
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:
Then when your application finishes loading: