How to Add Spinner Loader in Next.js ? (original) (raw)

Last Updated : 31 Jul, 2024

In web applications, providing a smooth and responsive user experience is very important. One way to achieve this is by adding a spinner loader to indicate that a process is ongoing, such as fetching data or loading a new page. In this article, we'll explore how to add a spinner loader in a Next.js application.

**Approach

To add our spinner loader we are going to use the react-loader-spinner package. The react-loader-spinner package helps us to integrate the spinner loader in our app. So first, we will install the react-loader-spinner package and then we will add a spinner loader on our homepage.

**Steps to Add Spinner Loader in Next.js

Step 1: Create a next.js application.

npx create-next-app gfg

**Step 2: Install the required package

Now we will install the react-loader-spinner package using the below command:

npm i react-loader-spinner

**Project Structure

Dependencies

dependencies
{
"react": "^18",
"react-dom": "^18",
"react-loader-spinner": "^6.1.6",
"next": "14.2.4"
}

**Adding the Spinner Loader: After installing the package we can easily add a spinner loader on any page in our app. For this example, we are going to add a loader to our homepage.

index.js `

import React from 'react'; import Loader from "react-loader-spinner"; import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";

export default function SpinnerLoading(){ return (

`

**Explanation: In the above example first, we are importing the Loader component and after that, we are using the Loader component in a new function to add our Spinner loader. Also setting color, height, weight, and timeout in the Loader component.

**Steps to run the application: Run the below command in the terminal to run the app.

npm run dev

Output: