How to Create a Skeleton Loading Component in Next.js 13

the finished skeleton

Ello~! Today, I want to walk you through the process of creating a skeleton loading component in Next.js 13. Skeleton loading provides a smooth and user-friendly experience while your content is being fetched or loaded asynchronously. We'll be following a tutorial by Alvaro Trigo, which you can find here.

First, let's set up the skeleton loading component in our Next.js 13 project:

1. Create the Loading Component: In your main app folder, create a file called loading.jsx. This component will contain the skeleton loading logic. Copy the following code into loading.jsx:

import Skeleton from "./components/Skeleton";

const LoadingPage = () => {
    return (
        <div className="space-y-6">
            <div className="space-y-2">
                <Skeleton className="w-[30ch] h-[1.25rem]" />
                <Skeleton className="w-[45ch] h-[1rem]" />
            </div>
            <div className="space-y-2">
                <Skeleton className="w-[30ch] h-[1.25rem]" />
                <Skeleton className="w-[45ch] h-[1rem]" />
            </div>
            <div className="space-y-2">
                <Skeleton className="w-[30ch] h-[1.25rem]" />
                <Skeleton className="w-[45ch] h-[1rem]" />
            </div>
        </div>
    );
};
export default LoadingPage;

1. Create the Skeleton Component: In your component folder, create a file called Skeleton.jsx. This component defines the skeleton's appearance and animation. Copy the following code into Skeleton.jsx:

const Skeleton = ({ className }) => {
    return (
        <div
            className={`bg-slate-200 motion-safe:animate-pulse rounded ${className}`}
        />
    );
};

export default Skeleton;

That's it! You've successfully implemented the skeleton loading component in your Next.js 13 project. The LoadingPage component will now display the skeleton loading effect with predefined styles and animations. Be sure to check out the original post by Alvaro Trigo for more details on customizing the skeleton appearance for different components.

Skeleton loading significantly improves the user experience by providing visual feedback while data is being fetched. Users will appreciate the seamless transition from skeletons to actual content once it's loaded.

I hope this guide helps you enhance the loading experience in your Next.js 13 project. Happy coding and enjoy the benefits of skeleton loading components!