Dev.to WebDev ๐Ÿ›  Dev ๐Ÿ‘ 0 ๐Ÿ“– 3 min read

I Built a Tiny Game for When Your App Takes Too Long to Load

Let's be honest. Nobody likes staring at a loading spinner. You wait. You stare at the screen. You wait some more. And eventually you start wondering if the application is actually loadingโ€ฆ or if it has simply given

Let's be honest.

Nobody likes staring at a loading spinner.

You wait.

You stare at the screen.

You wait some more.

And eventually you start wondering if the application is actually loadingโ€ฆ or if it has simply given up on life. ๐Ÿ˜…

So I built BoredLoad.

Instead of making users stare at a spinner while waiting for your application to finish loading, BoredLoad gives them a tiny game to play.

๐ŸŽฎ What is BoredLoad?

BoredLoad is a lightweight, open-source loading component that turns long loading times into a small playable experience.

The idea is simple:

User starts waiting
       โ†“
Loading...
       โ†“
Loading takes longer than expected
       โ†“
๐ŸŽฎ BoredLoad appears
       โ†“
User plays
       โ†“
Your content is ready
       โ†“
Game disappears

The goal isn't to hide slow performance.

It's simply to make the waiting experience a little less boring.

๐Ÿš€ Try it

You can check out the project here:

๐Ÿ‘‰ GitHub

And install it from npm:

npm install boredload

Why did I build it?

I was thinking about something that happens constantly when using web applications:

loading screens are everywhere.

Dashboards load data.

Apps make API requests.

Authentication happens.

Files upload.

Pages transition.

Sometimes those operations take a few seconds.

And during those few seconds, we're usually given the same experience:

       โณ
    Loading...

I thought:

What if the loading screen actually gave you something to do?

That's where BoredLoad came from.

๐Ÿง‘โ€๐Ÿ’ป Built for developers

BoredLoad is designed to be easy to drop into an existing project.

It supports:

  • TypeScript
  • Vanilla JavaScript
  • React
  • Angular
  • Vite
  • Next.js
  • Touch interaction
  • Keyboard interaction
  • High scores
  • Seeded randomness
  • prefers-reduced-motion
  • Customizable loading thresholds

And the core has zero runtime dependencies.

The goal was to keep it small enough that adding a tiny game to a loading screen doesn't become a huge performance penalty itself.

โš›๏ธ React example

For example, you can initialize BoredLoad when an operation starts:

import { BoredLoad } from "boredload";

const boredLoad = new BoredLoad({
  threshold: 1500,
});

boredLoad.start();

fetch("/api/data")
  .then((response) => response.json())
  .then((data) => {
    boredLoad.stop();

    // Render your data
  });

The basic idea is that BoredLoad doesn't need to know what you're loading.

It simply needs to know:

"Are we still waiting?"

๐Ÿ•น๏ธ Why a game?

There is actually something interesting about turning waiting into interaction.

A loading spinner is passive.

The user just watches.

A game is active.

Even a tiny interaction can change the perception of waiting.

Instead of:

"Why is this taking so long?"

It becomes:

"Can I beat my previous score?"

That's the little experiment behind BoredLoad.

๐Ÿงฉ Designed to be extensible

One of the things I wanted from the beginning was to avoid building a library that only supports one hardcoded experience.

The project has an extensible game architecture so new mini-games can be added over time.

The long-term idea is to have several small experiences:

BoredLoad
โ”‚
โ”œโ”€โ”€ ๐Ÿƒ Runner
โ”œโ”€โ”€ ๐Ÿ Snake
โ”œโ”€โ”€ ๐Ÿง  Memory
โ”œโ”€โ”€ ๐Ÿš€ Space
โ””โ”€โ”€ ๐Ÿงฑ Breakout

And potentially allow developers to create their own games.

Because if you're going to waitโ€ฆ

you might as well make it interesting.

๐Ÿ“ฆ Open source

BoredLoad is completely open source and released under the MIT License.

The repository is available on GitHub:

๐Ÿ‘‰ https://github.com/salamancacm/boredload

If you like the idea, I'd really appreciate a โญ on GitHub.

And if you find a bug, have an idea for a game, or want to contribute, pull requests and issues are welcome.

โ˜• Support the project

BoredLoad will remain free and open source.

If you enjoy the project, find it useful, or simply like the idea of making loading screens less boring, you can support its development on Ko-fi.

Even a small contribution helps me justify spending more time building weird little developer tools like this one. ๐Ÿ˜„

โ˜• Support BoredLoad on Ko-fi

What's next?

I'm planning to experiment with more mini-games, better customization, and additional integrations.

But for now, I just wanted to get the idea out there.

Maybe loading screens don't have to be boring.

Maybe we can make waiting a little more fun.

Try BoredLoad and let me know what you think.

๐Ÿ‘‰ GitHub

๐Ÿ‘‰ npm

โญ If you like it, consider starring the repository.

And if you build something with it, I'd love to see it.

๐Ÿ“ฐ Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes โ€” full credit and traffic to the original publisher.