In modern web development, providing a smooth and responsive user experience is crucial. We can use screen loaders to improve the overall usability and user satisfaction of our web application. When it comes to handling loading states in React applications, there are multiple powerful tools and packages available online to help us, such as react-lottie, react-loading, react-spinner and react-loaders. Among these packages, we'll explore react-loading. Let's see what react-loading is, how to use it, and why it can significantly enhance our application's user experience.
react-loading?react-loading is a popular npm package designed specifically for React applications. It offers a collection of pre-designed loading animations that can be seamlessly integrated into your components. These loading animations serve as visual indicators to inform users that a process is in progress, such as data fetching or asynchronous operations.
react-loadingTo get started with react-loading, you'll need to install it as a dependency in your React project by running the command:
npm install react-loading
Once installed, you can import the <ReactLoading> component from the library into your React application. The <ReactLoading> component takes in a few props and renders the loading indicators accordingly. The component accepts the following props:
Prop Name | Type | Category | Description |
| string | required | It is used to specify the type of loading animation. |
| string | optional | It is used to set the color of the loading animation. It accepts all the valid hex codes of the colors. |
| number | optional | It is used to set the height of the loading animation in pixels. |
| number | optional | It is used to set the width of the loading animation in pixels. |
| number | optional | It is used to add a delay (in milliseconds) before rendering the loading animation. |
By utilizing these props, we can customize the appearance and behavior of the loading animation as per our application's requirements.
The react-loading library provides several types of loading animations that we can use in the <ReactLoading> component. Here are the available types:
blank: This results in a blank screen without any animation.
balls: This renders the three bouncing balls in a row.
bars: This renders the moving bars animation.
bubbles: This renders the bubbling animation.
cubes: This renders the rotating cubes.
cylon: This results in a moving red dot from side to side.
spin: This results in a simple spinning animation.
spinningBubbles: This results in a spinning bubbles animation.
spokes: This renders the multiple spokes rotating around a central point.
Each loading type provides a unique visual effect which allows us to choose the one that best suits our application's design and purpose. We can set the type prop in the <ReactLoading> component to any of the above values to display the corresponding loading animation.
Let's take a look at a simple demo application where we have created a loading screen using the react-loading library. Click “Run” to execute the code. Once the server starts, we can either interact with the application in the output tab or click on the URL next to “Your app can be found at:” to view the application in the new browser tab.
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #6dc8cf;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
font-family: "Comic Sans MS", "Comic Sans", cursive;
color: black;
}
.App-loading {
background-color: #f7ae65;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-wrap:wrap;
width:100%;
font-size: 20px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
color: #2081F9;
overflow-y: hidden;
overflow-x:hidden;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
The execution of the code above displays the application page that shows the loading screen before displaying the application's landing (home) page. To make this application work correctly, we have created a variable loading that keeps track of whether the application's landing page is ready to be displayed. We have used a couple of React hooks, useState and useEffect, that help in setting the state of loading and then updating it when required. The rendering logic is quite simple. If the value of loading is TRUE, render the loading screen. Otherwise, display the landing page of the application.
Now, try changing the values of the props of the <ReactLoading> component (specifically, the type prop) on line 25 of the above code widget.
react-loading?Enhanced user experience: The use of react-loading allows us to provide clear and visually appealing loading indicators, making it evident to users that our application is actively working on a task. This helps to manage user expectations and reduces frustration caused by long waiting times.
Easy integration: With its straightforward installation and usage, react-loading seamlessly integrates into your React components. The library provides a range of loading animations, giving us the flexibility to choose the most suitable one for our application.
Customization options: The react-loading library offers customization options in the <ReactLoading> component such as colors, sizes, and animation types, enabling us to align the loading animations with our application's visual style.
Improved feedback: By utilizing loading animations, we provide meaningful feedback to users during data fetching or asynchronous operations. This feedback reassures users that our application is actively working on their request and prevents them from assuming the application has frozen or become unresponsive.
The smooth and convenient integration and the customization options offered by these packages make it easier than ever to implement loading indicators in our React applications.
Free Resources