Makes your application appear slow
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()
I don't think this warrants an issue, as the function has an immediately argument for a reason. There are comments in the function explaining why the argument is necessary.
I do however agree it's worthwhile spinning your own given the relative simplicity of the package.