Skip to content

Makes your application appear slow #38

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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