React Button Loading – JavaScript Exercise #19

Overview

In this exercise, create a loading animation for a button component in React. The animation will play when the button is in a loading state, giving users feedback that the application is working on their request.

Instructions for React Button Loading

1. First, create a new state variable in your button component called isLoading. This will keep track of whether the button is in a loading state or not.
2. Next, create a new CSS class for the loading animation. This class should define the animation properties, such as duration and timing function, as well as any other styles you want to apply.
3. Add a conditional statement to your button component that checks the isLoading state. If it is true, add the loading animation class to the button element. If it is false, remove the class.
4. Click the button to set the isLoading state to true. This will trigger the animation to play.
5. Once you complete the button’s action (such as after finishing an API request), set the isLoading state back to false. This will stop the animation.

Bonus Requirements

• Customize the loading animation to fit your application’s design
• Add a message or icon to the button to indicate that it is in a loading state
• Implement a timeout function that stops the animation if the request takes too long to complete

Please take time to do the exercise before viewing the final output. I believe that active learning is the most effective way to learn and grow as a developer.

Prepare your tools and get ready for the React Button Loading exercise. Once you have completed the exercise, feel free to return to this blog post to compare your solution to mine.

Output for React Button Loading exercise

import React, { useState } from 'react';
import './Button.css';

function Button(props) {
  const [isLoading, setIsLoading] = useState(false);

  const handleClick = () => {
    setIsLoading(true);
    // Call your API or perform any other action here
    // Once the action is completed, set isLoading back to false
  };

  return (
    <button
      className={isLoading ? 'button loading' : 'button'}
      onClick={handleClick}
      disabled={isLoading}
    >
      {isLoading ? 'Loading...' : props.text}
    </button>
  );
}

export default Button;

In this implementation, we first import React and useState from the react package, as well as the CSS file that contains our loading animation styles.

Then, we define our Button component. We start by initializing a state variable called isLoading to false using the useState hook.

Next, we define a function called handleClick that is called when the button is clicked. This function sets isLoading to true, which triggers the loading animation.

We then render our button element, with its class name and disabled property determined by the isLoading state. If isLoading is true, we also display the text “Loading…” on the button, otherwise we display the text passed in through the text prop.

Finally, we export our Button component for use in other parts of our application.

import React from 'react';
import Button from './Button';

function App() {
  return (
    <div className="App">
      <Button text="Click me!" />
    </div>
  );
}

export default App;

.button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.button:hover {
  background-color: darkblue;
}

.button.loading {
  background-color: lightgray;
  cursor: not-allowed;
}

.button.loading:after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid white;
  border-color: white transparent white transparent;
  animation: spin 1s linear infinite;
  margin: auto;
  margin-left: 10px;
}

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

Adding a loading state to a button or any other UI component provides feedback to the user that their request is being processed, making it important.

When a user interacts with an application, they expect a response within a reasonable amount of time. If the system does not indicate that it is processing their request, they may assume that the application is not working or has encountered an error. This can lead to frustration and confusion and may cause the user to abandon the application.

We can provide visual feedback to the user that their request is being processed by adding a loading state to a button. This can take the form of a loading animation or a message indicating that the application is working on their request. This feedback reassures the user that the application is still functioning and helps to manage their expectations regarding response times.

Conclusion

Overall, adding a loading state to a button is a simple and effective way to improve the user experience of an application by providing feedback and reducing confusion.

Thanks for taking this JavaScript exercise!

I hope you found this exercise helpful and enjoyable, and that it has deepened your understanding of React development. Keep practising and experimenting with React, and you’ll be well on your way to becoming a skilled React developer!

Boost your React skills with 25 React JavaScript Practice Exercises with Solutions hands-on challenges to master components, hooks, and more!