Skip to content

Makes your application appear slow #38

@srmagura

Description

@srmagura

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions