How to make a loading button?-CodePudding

I want to make a button to be on loading animation until a function is done. Something like this:

const [isLoading, setLoading] = useState<boolean>(false)

function handleSave() {
      setLoading(true)

      for (let i = 1; i < 20000; i  ) {};

      setLoading(false)

    }

 <Button
      loading={isLoading}
      disabled={isLoading}
      onClick={_ => handleSave()}>
      Save
</Button>

I`m a beginner and I don't know exactly how to do that. Do you have some recommendations?

CodePudding user response：

I think you are using react-bootstrap. There is no loading attribute for a button if I am not wrong. Here is the documentation on how to do a loading button

This is what you can do when render the button with different text when it is loading.

<Button
    disabled={isLoading}
    onClick={handleSave}
>
{ isLoading ? "Loading": "Save" }
</Button>

You can include the spinner animation from react-bootstrap also.

<Button
    disabled={isLoading}
    onClick={handleSave}
>
{ isLoading && <Spinner as="span" animation="grow" /> }
{ isLoading ? "Loading": "Save" }
</Button>

CodePudding user response：

To make a button display a loading animation until a function is done in React, you can use the useState hook to manage the loading state of the button and the setTimeout function to delay the update of the loading state until the function is done.

Here is an example of how you can do this:

import React, { useState } from 'react'

function MyButton() {
  const [isLoading, setLoading] = useState<boolean>(false)

  function handleSave() {
    setLoading(true)

    // Simulate a long-running function
    for (let i = 1; i < 20000; i  ) {};

    // Update the loading state after the function is done
    setTimeout(() => setLoading(false), 1000)
  }

  return (
    <button
      loading={isLoading}
      disabled={isLoading}
      onClick={_ => handleSave()}>
      Save
    </button>
  )
}

In the code above, the useState hook is used to manage the isLoading state of the element. The handleSave() function is used to simulate a long-running function, and the setTimeout function is used to delay the update of the isLoading state until the function is done.

The loading attribute of the is set to the isLoading state, so it will be true when the function is running and false when the function is done. The disabled attribute is also set to the isLoading state, so the button will be disabled while the function is running.

CodePudding user response：

UseEffect hool to make a button display loading animation till the function is done:

const [isLoading, setLoading] = useState<boolean>(false);

function handleSave() {
  for (let i = 1; i < 20000; i  ) {};
}

useEffect(() => {
  setLoading(true);
  handleSave();
  setLoading(false);
}, []);

return (
  <Button
    loading={isLoading}
    disabled={isLoading}
    onClick={() => handleSave()}
  >
    Save
  </Button>
);

reference: https://reactjs.org/docs/hooks-effect.html