Can't implement react redirect with loader-spinner

Question

I have a problem with redirecting and loader-spinner. So I need to redirect the user to dashboard page if logged in. Actually, I can implement redirect, but also I need to run some loader because before redirecting, the login page is visible about 100ms. So it would be nice for the authenticated user not to see that tick, but some loader. I have also tried much more methods for doing it, but in any case, I got some problem. So I am here for your advice. Maybe I did something wrong, and perhaps the way of my approach is wrong.

This is my routers `

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { connect } from 'react-redux';
import DashboardPage from '../components/pages/DashboardPage';
import LoginPage from '../components/pages/LoginPage';
import NotFoundPage from '../components/pages/NotFoundPage';
import { getUserInfo } from '../actions';

class AppRouter extends Component {
  componentDidMount() {
    const { dispatchUserInfo } = this.props;
    dispatchUserInfo();
  }

  render() {
    return (
      <BrowserRouter>
        <React.Fragment>
          <Switch>
            <Route path="/" component={LoginPage} exact />
            <Route path="/dashboard" component={DashboardPage} />
            <Route component={NotFoundPage} />
          </Switch>
        </React.Fragment>
      </BrowserRouter>
    );
  }
}

AppRouter.defaultProps = {
  dispatchUserInfo: null
};

AppRouter.propTypes = {
  dispatchUserInfo: PropTypes.func
};

const mapDispatchToProps = dispatch => ({
  dispatchUserInfo() {
    dispatch(getUserInfo());
  }
});

export default connect(null, mapDispatchToProps)(AppRouter);

This my login page `

import React from 'react';
import { NavLink } from 'react-router-dom';

const logo = require('../../../../public/images/event.png');

const config = {
  logo,
  authUrl: ''
};

const LoginPage = () => (
  <div className="container">
    <div className="container__left">
      <header className="login-header">
        <div className="login-header__wrapper">
          <p className="login-header__logo-box">
            <NavLink to="/" role="link"><img src={config.logo} alt="logo" width="190" height="80" className="navbar__logo" /></NavLink>
          </p>
        </div>
      </header>
      <main>
        <section className="register">
          <div className="register-wrapper">
            <section className="register__description">
              <header className="register__header">
                <h2>Events</h2>
                <p>Here you can search your favourite events and get the location on map</p>
              </header>
              <p className="register__info">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    Lorem Ipsum has been the industry standard dummy text ever since the 1500s,
                    when an unknown printer took a galley of type and scrambled it to make
                    a type specimen book.It has survived not only five centuries,
                    but also the leap into electronic typesetting,
                    remaining essentially unchanged. It was popularised
                    in the 1960s with the release of Letraset sheets containing
                    Lorem Ipsum passages, and more recently with desktop publishing
                    software like Aldus PageMaker including versions of Lorem Ipsum.
              </p>
            </section>
          </div>
        </section>
      </main>
      <footer className="main-footer">
        <p className="copyright">
&copy; Events 2018:
          {' '}
          <small>All rights reserved</small>
        </p>
        <p>
Created by
          {' '}
          <a className="author" href="https://www.linkedin.com/in/norayr-ghukasyan-44641a161/">Norayr Ghukasyan</a>
        </p>
      </footer>
    </div>
    <div className="container__right">
      <section className="login">
        <p className="login__text">Sign in with Eventbrite</p>
        <p className="login__button-box">
          <a href="/auth/eventbrite" className="btn btn--login login__button">Sign in</a>
        </p>
      </section>
    </div>
  </div>
);

export default LoginPage;

Where should I use redirect and loader?