Set TimeOut to loader in ReactJS

How to set timeout to a loader in reactjs

Login.js :

import React from 'react';
//import '../App.css';
import '.././Container/Login.css';
import '../Styles/images/icons/favicon.ico';
import '../Styles/css/bootstrap.min.css';
import '../Styles/fonts/font-awesome-4.7.0/css/font-awesome.min.css';
import '../Styles/css/util.css';
import '../Styles/css/main.css';
import '../Styles/css/animate.css';
import '../Styles/fonts/iconic/css/material-design-iconic-font.min.css';
import '../Styles/fonts/Linearicons-Free-v1.0.0/icon-font.min.css';

class Login extends React.Component {
    render() {
        return(            
            <div className="limiter">
                <div ng-show="loadingState">
                    <div className="loading" id="loader"></div>
                </div>
                <div className="container-login100">
                    <div className="login100-more">               
                        <div className="login-cont">
                            <h5>Welcome to</h5>
                            <h1></h1>
                            <p></p>
                        </div>
                    </div>
                    <div className="wrap-login100 p-l-50 p-r-50 p-t-72 p-b-50">               
                        <form name="loginForm" className="login100-form validate-form" noValidate>
                            <span className="login100-form-title p-b-59">
                                User Login
                            </span>
                            <div className="wrap-input100 validate-input" data-validate="Username is required">
                                <span className="label-input100">Username</span>
                                <input className="input100" type="text" name="username" placeholder="Username" ng-model="user.username" required autoFocus></input>
                                <span className="focus-input100"></span>                       
                            </div>                    
                            <div className="wrap-input100 validate-input" data-validate="Password is required">
                                <span className="label-input100">Password</span>
                                <input className="input100" type="password" name="password" placeholder="********" ng-model="user.password" required></input>
                                <span className="focus-input100"></span>                        
                            </div>                   
                            {/* <span className="error" ng-show="loginForm.password.$dirty && loginForm.password.$error.required || loginForm.username.$dirty && loginForm.username.$error.required">Username and/or Password required</span>               */}
                            <div className="container-login100-form-btn">
                                <div className="wrap-login100-form-btn">                            
                                    <div className="login100-form-bgbtn"></div>
                                        <button className="login100-form-btn" type="submit" ng-click="login(input)">
                                            Login
                                        </button>
                                </div>
                            </div>
                                <h6 className="pos-fixed bottom-0 mb-4 ml-5">.</h6>
                        </form>
                    </div>
                </div>
            </div>
        )
    }
}
export default Login;

index.js : 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

App.js :

import React from 'react';
import Login from './Components/Login.js';
import './App.css';

function App() {
  return (
    <div className="App">
      <Login /> 
    </div>
  );
}

export default App;

index.html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
    <title>SSIS Warehouse</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
   
  </body>
</html>