How to add skeleton loading components in Next.js

Skeleton loaders are aimed at giving users a perfect and best experience while waiting for the actual web content to load. As a result, in this article, we are going to learn about how to add skeleton loading components in Next.js.

Let’s get started

Step 1: Install the required dependencies

> npm i react-loading-skeleton

Step 2: Adding the skeleton loading

After installing the package, we can easily add Skelton load to our Next.js application. Inside pages/index.js, add the following code:

For React inside src/App.js

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

export default function Home() {
  const [loading, isLoading] = useState(true);
  return (
    <div className="m-2 p-4 max-w-screen-md mx-auto">
      <h1 className="text-3xl font-bold mb-4">Hello World</h1>
      {loading ? (
        <Skeleton count={10} />
      ) : (
        `Next.js skeleton loading`
      )}
      <br />
      <hr />
      <br />
      <input
        type="checkbox"
        checked={loading}
        onChange={(e) => isLoading(e.target.checked)}
      />{" "}
      Loading
    </div>
  );
}

This will add the skeleton loading to the page.

Wrap Up

Now you will be able to add a skeleton loading component to your Next.js application.

I have created an example of this, in case you want to check that out: skeleton-loading-nextjs.vercel.app

Thanks for reading

Follow me on Twitter

Thanks for reading!