Loading spinner when button is disabled

[sagnik2001]

Issue reference: Loading spinner when the button is disabled

Proposed changes: Added spinner when an API request is made or when the button is disabled.

Type of change:

• [x] New feature (non-breaking change which adds functionality)

Checklist:

• [x] My code follows the style guidelines of this project
• [x] I have performed a self-review of my own code
• [x] I have commented my code, particularly in hard-to-understand areas
• [x] I have made corresponding changes to the documentation
• [x] My changes generate no new warnings

Additional info (if any):

I have made the changes in the components which I found if any left out I will do the desire changes

[netlify[bot]]

‼️ Deploy request for tomper-wear rejected. Learn more about Netlify's sensitive variable policy

🔨 Explore the source changes: 81179328adf605b6c007d830d503706a9de1242a

[varunKT001]

@sagnik2001 There is nothing wrong with your implementation, but it creates some issues:

• You have to make a check for the loading state, whenever you use a button that calls an API.
• The loading button is bigger in size than the non-loading one. It causes a sudden scroll on the page, which looks odd 😕

What I wanted you to do, was to create an src/components/Button component that will accept all the props:

const Button = ({ disabled, children, ...rest }) => {
  return (
    <button disabled={disabled} {...rest}>
      {disabled ? <Icon /> : children}
    </button>
  );
};

something like this ⬆️

After doing so, you can replace all the instances of <button> with this component <Button> where you can give all the props just like you did in the normal button. You also won't need to write any extra styles for that, you give the class name as you normally do. The point here is, not to make a check for loading in every component. You just create a separate button component and make all the checks inside that.

For the label, you can make a check manually

<label>
  { loading ? <Icon/> : 'text' }
</label>

I hope you got my point 👍

[sagnik2001]

Okay,making the changes

[sagnik2001]

Hey @varunKT001, check if this is what you want??

[varunKT001]

@sagnik2001 Yeah, that's what I wanted, but you have to do some more changes 😅

• Use normal buttons for the google sign in/sign up (there is an issue with that, we'll into it later)
• For the label on the profile page, remove the check and make it normal. It's making the button shrink. Didn't notice it at first, really sorry for that 😓

<label>upload image</label>

• Somewhere in the profile page, you passed the disabled prop two times 🙂 fix that (also make sure to always check the console warnings before making a commit).
• Rename the button component name from LoadingButton to Button, since it can be used as a normal button.
• In the loading icon component, add a width of 1.025rem (I tested it, works fine)

<svg style={{ ... , width: '1.025rem' }}>
  ...
</svg>

• Remove the extra lines that you have put in the jsx in all the changed files and make sure to format all files.
• There are a few more buttons that make API calls: review button and feedback button. Do the change for them too.

For now, do these changes 👍

[sagnik2001]

Check it @varunKT001, is it okay now??

[varunKT001]

In the loading icon component, add a width of 1.025rem (I tested it, works fine)

Remove the width and height, otherwise, there is no sense of putting width: '1.025rem' remove these two lines ⬆️

Use normal buttons for the google sign in/sign up (there is an issue with that, we'll into it later)

You didn't do this change. Make these normal buttons <button>, in both the login and register pages.

also make sure to always check the console warnings before making a commit

Still, there is a warning Remove the import Icon, since we are not using it.

[sagnik2001]

Hey @varunKT00,check it hope it's fine now

[varunKT001]

Looks good now 👍

Thanks for contributing @sagnik2001 🚀