在React中的onClick事件上运行多个功能以渲染加载页面

Question

我正在寻找一种在React中的onClick事件上加载多个功能的方法。我要做的是在用户登录页面和主页之间集成一个加载页面，该加载页面将持续约5秒钟。基本上，单击按钮后，我要渲染加载页面5秒钟，然后在超时后渲染主页。现在，我似乎无法弄清楚如何合并此加载页面（现在，它只是一个空白页面，它不必等待任何加载，因为我还没有连接数据）。

UserLogin.jsx

import React from 'react'
import { Container, Image, Grid } from 'semantic-ui-react'
import '../login/UserLogin.css'

const UserLogin = ({history}) => {  
    return (
      <div>
  <Container> 
    <Grid>
      <Grid.Row>
        <Grid.Column>
          <Image centered size='medium' src="https://s3.amazonaws.com/whatif-assets-cdn/images/Zuul/zuul_logo_white.png"></Image>
        </Grid.Column>
        </Grid.Row>
        <Grid.Row centered>
        <div onClick={() => history.push('/DashBoard')} className="ui huge white button">Login with Google        
        </div>
        </Grid.Row>
    </Grid> 
  </Container>
  </div>
    )
}

export default UserLogin

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

正在加载页面

import React, { Component } from 'react'

const dailyTrivia = ["Did you know that the galaxy has its own magnetic field? Don't worry though, it's only got about one-hundreth the pull of the magnet inside your refrigerator.",
            "Did you know that magnetism explains how homing pigeons can navigate so well? They have magnetite in their beaks which helps them sense the Earth's magnetic field.",
            "If you heat a magnet, you can destroy it's magnetic properties (whomp, whomp), but if you freeze it, it'll be just fine.",
            "Did you know Magnetic Resonance Imaging (MRI) machines use magnets to see inside your body? They generate stronger magnetic fields than the Earth."
];

function shuffle(dailyTrivia) {
    var m = dailyTrivia.length, t, i;
  
    // While there remain elements to shuffle…
    while (m) {
  
      // Pick a remaining element…
      i = Math.floor(Math.random() * m--);
  
      // And swap it with the current element.
      t = dailyTrivia[m];
      dailyTrivia[m] = dailyTrivia[i];
      dailyTrivia[i] = t;
    }
  
    return dailyTrivia[i];
  };

class Loader extends Component {
  
    state = {
    facts: dailyTrivia
  };
  

  render() {
  return (
    <div>

        <h4>{shuffle(this.state.facts)}</h4>
    </div>
  )
}
}

export default Loader

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import DashBoard from '../../features/home/DashBoard';
import UserLogin from '../../features/login/userLogin';


//import NavBar from '../../features/nav/NavBar/NavBar'
class App extends Component {
  render() {
    return (
     <div> 
        <Switch>
          <Route exact path="/" component={UserLogin} />
        </Switch>

        <Route
          path="/(.+)"
          render={() => (
            <div>
                <Switch>
                  <Route path="/DashBoard" component={DashBoard} />
                </Switch>
            </div>
          )}
        />
      </div> 

      
    );
  }
}

export default App;