Button click - changing button text to inform user in progress action

JavaScript
1

Below is the pretty crude method I’ve implemented to inform user than button click is in progress

  • How to add nice loading animation on sign up button
  • How can I animate “Loading…” text
  • Is the code correct or needs optimization ?
const [isButtonClicked, setButtonLoading] = useState(false);
    const toggleButtonClicked = () => {
        setButtonLoading(isButtonClicked => !isButtonClicked);
    }
	
	
                                  <button
                                       disabled={isInvalid}
                                       type="submit"
                                       className={`bg-blue-medium text-white w-full rounded h-8 font-bold
                                       ${isInvalid && 'opacity-50'}
                                       ${isInvalid && 'cursor-default'}
                                       `}
                                       onClick={toggleButtonClicked}
                                   >
                                       {!isButtonClicked ? "Sign Up" : "Loading..."}
                                   </button>
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.