Tired of Waiting? Meet the Shimmering Skeletons! 🦴✨

No one, and I mean no one, enjoys waiting. We're in the era of "I want it, and I want it now". So, as app developers, we've got to consider this little human impatience quirk.

How can we keep users entertained during those microseconds of loading time, you ask? Well, let's introduce a secret weapon from our developer utility belt: Skeletons! No, not the Halloween kind, I'm talking about skeleton screens.

With skeletons, your users might just think they've bought a VIP ticket 🎟 to the fastest show on the web.

These clever tricks of the trade are sprinkled all over the internet. Essentially, skeletons are placeholders, blank spaces that match the eventual content in terms of width and height. They've even got a neat little loading animation to keep things lively. Yep, quite simple. But oh-so-effective.

Now, I have a special fondness for using skeletons in my apps. Why, you ask? Because they give the illusion of instant loading and provide the user with immediate feedback. And who doesn't love that?

Let's be honest, though, we programmers are a lazy bunch. Why would we create a component for a skeleton from scratch when we could use a pre-made one? Sounds like extra work, and we're allergic to that. So, let's go for the conveniently ready-made: react-loading-skeleton. It's a beauty, take my word for it.

Getting it up and running is as simple as pie:

npm install react-loading-skeleton

or if you're a yarn enthusiast:

yarn add react-loading-skeleton

Now that you've added react-loading-skeleton to your project, let's dive right in and see how we can utilize this magnificent tool in our React application.

Basic Skeleton Usage:

Here's a simple example of how you can use it:

import Skeleton from 'react-loading-skeleton';
import "react-loading-skeleton/dist/skeleton.css";

function UserProfile() {
    return (
        <div>
            <Skeleton circle height={50} width={50} />  {/* Profile Picture */}
            <Skeleton height={20} width={100} />               {/* User Name */}
            <Skeleton count={3} />                              {/* Three lines for the user bio */}
        </div>
    );
}

Bingo! You’ve got a mock user profile that's ready to shimmy while the real deal is prepping backstage.

Skeletons & Loading State: The Dynamic Duo 👫 :

Now, skeletons, while fab, aren't solo artists. They groove best with loading states. When you’re connecting with, say, an API from Timbuktu, these skeletons can come out, do a jig, and keep your users entertained.

In our playful demo code, we’ve got this nifty switcheroo button. Give it a poke, and bam, skeletons come out doing the cha-cha! Another poke? Real content rolls out the red carpet. But, here’s the 411: in a real-deal app, this isn’t just some manual button magic. Oh no, my friend! You’d typically have things like useEffect hooking you up with data, or maybe even use slick tools like React Query, where it serves up its own fancy loader. Imagine trading in your kiddo's play oven for Gordon Ramsay's kitchen. That’s the upgrade we’re talking about when moving from a plain button to dynamic data loading! 🍳🔥

import { useState } from "react";
import Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
import "./Skeleton.css";

export default function SkeletonExample({ img }) {
    const [loading, setLoading] = useState(true);

    return (
        <div className="skeleton">
            <button onClick={() => setLoading(!loading)}>
                {loading ? "Hide Skeleton" : "Show Skeleton"}
            </button>
            <div className="post">
                <div className="left-col">
                    <div className="avatar">
                        {loading ? (
                            <Skeleton
                                circle
                                height="100%"
                                containerClassName="avatar-skeleton"
                            />
                        ) : (
                            <img src={img} alt="Profile of a user" />
                        )}
                    </div>
                    <div className="user-name">
                        {loading ? <Skeleton width={70} /> : "FB"}
                    </div>
                </div>
                <div className="right-col">
                    <h3>
                        {loading ? <Skeleton /> : "Use React Loading Skeleton!"}
                    </h3>
                    <p className="mb-0">
                        {loading ? (
                            <Skeleton count={3} />
                        ) : (
                            <>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                <br />
                                arcu. Suspendisse faucibus aliquam ante, sit amet
                                <br />
                                iaculis.
                            </>
                        )}
                    </p>
                </div>
            </div>
        </div>
    );
}

Ready to rock the stage with skeletons? Dive in, play around, and let the show begin! 🎤 🤩