How to Add seprate Loader file on a onClick event button on ReactJS?

Question

I am new to React JS still learning a lot. I created another js file (Loading.js) which is I want it to be a loader on my onClick event specifically on (New Client button) && (Manage Account button)

import React from 'react';
import Loading from './Loading';
import '../Styles.scss';
    Modal,
    Icon,
} from 'semantic-ui-react';

function InvestNow() {
  return (
    <div>
      <Button
        onClick={() => {
          window.location.href = '/';
          //* ADD Loading.js here
        }}
        color="yellow"
        fluid
        icon
        labelPosition="left">
        <Icon name="plus" />
        New Client
      </Button>
    </div>
  );
}

export default InvestNow

This is the Loader I created from react-loader-spinner

My Loading.js


import React, { Component } from 'react';
import Loader from 'react-loader-spinner';
import '../Styles.scss';
import 'react-loader-spinner/dist/loader/css/react-spinner-loader.css';

class Loading extends React.Component {
  render() {
    return (
      <Loader
        type="Bars"
        color="#FFD400"
        height={450}
        width={100}
        timeout={5000} //3 secs
        className="Loadingstyle"
      />
    );
  }
}

export default Loading;

So on click you want to display a loading animation? This can be done by creating a state in InvestNow component to track whether or not the loading should be shown const [loading, setLoading] = React.useState(false); you can then set loading to true in your click setLoading(true); To display your loader you can conditionally display it using { !!loading && <Loading /> } — Jacob Smit
– Jacob Smit, Commented Oct 20, 2020 at 2:39
do you use router ? do you use redux mobx or any other state manage library ? — Robert
– Robert, Commented Oct 20, 2020 at 2:42

Sankar Boro · Accepted Answer · 2020-10-20 03:34:27Z

1

Actually what you want is to maintain a state to toggle loading indicator. For that import "useState" from react. And then use the below code as reference.

<Button
onClick={() => {
    setLoading(true);
    setTimeout(function(){ 
       setLoading(false);
       window.location.href='/';
    }, 5000);
}}
>
    {isLoading ? <Loading /> : null }
    <Icon name="plus" />
    New Client
</Button>

You also need to maintain state to handle toggling loading indicator. Inside "InvestNow" function write this code.

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

edited Oct 20, 2020 at 3:34

answered Oct 20, 2020 at 2:48

Sankar Boro

1411 gold badge1 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cjames24 Over a year ago

Thank you for having your time to answer. I think my question is Misleading Sorry for that. This would be the sequence: After I click the button, my Loader will appear ( which is I set for 5sec) then will redirect to another js file. Thank you so much

cchiaramelli · Accepted Answer · 2020-10-20 02:50:21Z

If I understood correctly, you want to show your Loading.js component instead of the button after onClick is called. If so, you actually need to add an state management to your component. Something like

function InvestNow() {
  // Variable to control whether you should render loading or button
  const [isLoading, setIsLoading] = React.useState(false)

  return (
    <div>
      {
        // Will render Button when not loading, and Loading component otherwise
        !isLoading ? (
          <Button
            onClick={() => {
              // Sets loading to true
              setIsLoading(true)

              // Do other things
            }}
            /* ... */
          />
        ) : (
          <Loading
            /* ... */
          />
        )
      }
    </div>
  )
}

For React.useState reference: https://reactjs.org/docs/hooks-reference.html#usestate

Collectives™ on Stack Overflow

How to Add seprate Loader file on a onClick event button on ReactJS?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related