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

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. When the button is clicked, set the isLoading state to true. This will trigger the animation to play.

5. Once the button's action is completed (such as after an API request is finished), 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

Before you dive into the final output, I want to encourage you to take some time to work through the exercise yourself. I believe that active learning is the most effective way to learn and grow as a developer.

So, grab a pen and paper, fire up your code editor, and get ready to dive into 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 the 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 is important because it provides feedback to the user that their request is being processed.

When a user interacts with an application, they expect a response within a reasonable amount of time. If there is no indication that their request is being processed, 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.

By adding a loading state to a button, we can provide visual feedback to the user that their request is being processed. 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.

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!

If you have any questions or comments, feel free to reach out to me on Twitter(@rajeshtomjoe), or follow me for more updates.

And if you'd like to receive more exercise on JavaScript, be sure to subscribe to my blog.