Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Makes your application appear slow #38

Open
srmagura opened this issue Nov 17, 2021 · 1 comment
Open

Makes your application appear slow #38

srmagura opened this issue Nov 17, 2021 · 1 comment

Comments

@srmagura
Copy link

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()
@texonidas
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants