Creating a Loading Spinner in Next.js | Updated 2024

101

When developing web applications, displaying a loading spinner is essential to enhance the user experience by providing visual feedback during data fetching or long-running processes. In this article, we’ll walk through the steps to implement a loading spinner in a Next.js application.

Steps of creating Loading Spinner in Next.js

Step 1: Setting Up the Next.js Project

First, create a new Next.js project if you don’t have one already.

npx create-next-app nextjs-loading-spinner
cd nextjs-loading-spinner

Next, install any necessary dependencies:

npm install

Step 2: Creating the Loading Spinner Component

Create a new component named LoadingSpinner.js in the components directory.

// components/LoadingSpinner.js
import styles from './LoadingSpinner.module.css';

const LoadingSpinner = () => {
  return (
    <div className={styles.spinnerContainer}>
      <div className={styles.spinner}></div>
    </div>
  );
};

export default LoadingSpinner;

Step 3: Adding Styles for the Spinner

Create a CSS module file named LoadingSpinner.module.css in the same directory as the LoadingSpinner.js component.

/* components/LoadingSpinner.module.css */
.spinnerContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #000;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

Step 4: Using the Loading Spinner in a Page

Now, let’s use the LoadingSpinner component in a page. For demonstration purposes, we will create a page that fetches data from an API and displays the loading spinner while the data is being fetched.

Create a new page named data-fetching.js in the pages directory.

// pages/data-fetching.js
import { useState, useEffect } from 'react';
import LoadingSpinner from '../components/LoadingSpinner';

const DataFetching = () => {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    // Simulate a data fetching process
    setTimeout(() => {
      fetch('https://jsonplaceholder.typicode.com/posts')
        .then((response) => response.json())
        .then((data) => {
          setData(data);
          setLoading(false);
        });
    }, 2000);
  }, []);

  if (loading) {
    return <LoadingSpinner />;
  }

  return (
    <div>
      <h1>Fetched Data</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataFetching;

Step 5: Running the Next.js Application

Start the Next.js development server:

npm run dev

Navigate to http://localhost:3000/data-fetching in your browser. You should see the loading spinner for a few seconds before the fetched data is displayed.

Conclusion

In this article, we have learned how to create a loading spinner component in Next.js and use it to provide visual feedback during data fetching. This approach can be extended to other parts of your application where you need to indicate loading states to users.

For more updates on programming trends and tutorials, visit blogsea.net regularly.

Creating a Loading Spinner in Next.js – FAQs