please-wait icon indicating copy to clipboard operation
please-wait copied to clipboard

Makes your application appear slow

Open srmagura opened this issue 4 years ago • 1 comments

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()

srmagura avatar Nov 17 '21 22:11 srmagura

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.

texonidas avatar Aug 17 '22 03:08 texonidas