How to Add a Loading GIF in ReactJS?
Last Updated :
01 Oct, 2024
Loading indicators are essential in web applications to enhance user experience by providing visual feedback during asynchronous operations. They help users understand that a process is ongoing and prevent them from interacting with the application while it's loading.
Approach
- Start by defining a state variable (e.g.,
isLoading
) using the useState
hook to track whether data is currently being loaded. - Use an effect hook (like
useEffect
) to initiate your data fetching or any asynchronous operation when the component mounts or when certain dependencies change. - Before starting the asynchronous operation, set
isLoading
it to true
. Once the operation is complete (whether it succeeds or fails), set isLoading
back to false
. - Implement conditional rendering in your component’s return statement. If
isLoading
is true
, render the loading GIF; otherwise, render the actual content.
Steps to Create a React Application
Step 1: You will start a new project using the following command
npx create-react-app loading-app
Step 2: Now go to your loading-app folder by typing the given command in the terminal.
cd loading-app
Project Structure:
Project StructureUpdated Dependencies:
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "^5.0.0"
},
"devDependencies": {
"@types/react": "18.2.38",
"@types/react-dom": "18.2.15",
"loader-utils": "3.2.1",
"typescript": "4.4.4"
},
Example: This example shows the the Loading GIF to a React Component.
JavaScript
// src/LoadingExample.js
import React, { useState, useEffect } from 'react';
const LoadingExample = () => {
// Step 1: Set up state for loading
const [isLoading, setIsLoading] = useState(true);
// Step 2: Simulate data fetching with useEffect
useEffect(() => {
// Simulate a data fetching delay
const timer = setTimeout(() => {
setIsLoading(false); // Set loading to false after 3 seconds
}, 3000);
// Cleanup the timer when the component unmounts
return () => clearTimeout(timer);
}, []);
return (
<div>
{/* Step 3: Conditional rendering */}
{isLoading ? (
<div className="loading">
<img src="loading.gif" alt="Loading..." />
</div>
) : (
<div>
<h1>Data Loaded!</h1>
<p>This is the content that appears after loading is complete.</p>
</div>
)}
</div>
);
};
export default LoadingExample;
JavaScript
// App.js
import React from 'react';
import LoadingExample from './LoadingExample';
function App() {
return (
<div className="App">
<LoadingExample />
</div>
);
}
export default App;
Output:
Conclusion
Adding and managing a loading GIF in a ReactJS application involves several key steps: preparing and placing the GIF file, incorporating it into your React components using state and conditional rendering, and applying appropriate CSS styles to ensure proper display. Testing the integration involves verifying the GIF's appearance during loading states and ensuring that content is correctly displayed once loading is complete.
Similar Reads
How to create Loading Screen in ReactJS ? Loading screen plays a major role in enhancing UX development. In this article, we are going to learn how we can create a Loading Screen in ReactJs. A loading screen is a picture shown by a computer program, often a video game, while the program is loading or initializing.PrerequisitesJavaScript and
2 min read
Lazy Loading in React and How to Implement it ? Lazy Loading in React is used to initially load and render limited data on the webpage. It helps to optimize the performance of React applications. The data is only rendered when visited or scrolled it can be images, scripts, etc. Lazy loading helps to load the web page quickly and presents the limi
4 min read
How to Add GIF in HTML? GIFs (Graphics Interchange Format) are the popular image format that supports both animated and static images. Adding the GIFs to the HTML document enhances the visual appeal and the user interaction of the web pages. They are commonly used for loading animations, fun illustrations, or visual explan
2 min read
How to Drawing Canvas in React.js ? In this article, we are going to learn how we can add drawing canvas in ReactJs. React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. Prerequisites:NodeJS or NP
2 min read
How to Add Spinner Loader in Next.js ? 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
2 min read