在反应中创建加载微调器

好的，基本上，当我点击注册页面上的注册按钮时，需要几秒钟才能进入条纹页面。我想为进入条纹页面所需的时间添加一个微调器，基本上是那个不确定时期。我是新来的反应，所以不知道如何做到这一点。这可能吗？

这是我的注册页面：

   import React from 'react'

import './RegistrationForm.css'

import { Alert, Button, Form, Input } from 'antd'
import { AuthorizationHome } from '../models'
import { withRouter } from 'react-router-dom'
import * as routes from '../routes'
import facades from '../facades'
import firebase from 'firebase'
import { useState } from "react";
import {createCheckoutSession} from '../Stripepayment/checkout'
import { Spinner } from 'react-bootstrap';


let firestore = firebase.firestore()

const FormItem = Form.Item


var userIDStripeSubmit = ""
class RegistrationForm extends React.Component {
  state = {
    confirmDirty: false,
  }

  
  
  onSubmit = (event) => {
    event.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (err) return
      const email = this.props.form.getFieldValue('email')
      const passwordOne = this.props.form.getFieldValue('password1')
      const firstName = this.props.form.getFieldValue('First Name')
      const lastName = this.props.form.getFieldValue('Last Name')
      const companyName = this.props.form.getFieldValue('Company Name')

      const {
        history,
      } = this.props

      AuthorizationHome.doCreateUserWithEmailAndPassword(email, passwordOne)
        .then((authUser) => facades.userFacade().doCreateUser(authUser.user.uid, email))

        .catch(error => {
          this.setState({'error': error})
        })



        // adding into profiledata collection


            // var userID = ""
            firebase.auth().onAuthStateChanged((user) => {
                if(user) {
                
                console.log(user.uid)
                userIDStripeSubmit = user.uid

                  console.log("userid inside firebase auth is" + user.uid)

                        //  var firstNameFromField = 
                          firestore.collection('profiledata').doc(user.uid).set({
                            firstname: firstName,
                            lastname: lastName,
                            companyname: companyName,
                            accountStatus: "inactive",
                        })
                        .catch(error => {
                            alert(error.message);
                        });
                        createCheckoutSession(user.uid)
              }
              })
             
              // firestore collection query
                
    })
  }

  handleConfirmBlur = (e) => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  }

  compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password1')) {
      callback('Passwords do not match!');
    } else {
      callback();
    }
  }

  validateToNextPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['password2'], { force: true });
    }
    callback();
  }


  

  render() {
    const { getFieldDecorator } = this.props.form
    const { error } = this.state
    return (
      <Form onSubmit={this.onSubmit}  hideRequiredMark={true} className="registration-form" style={{ marginBottom: "0px" }}>
        { error && <Alert type="error" message={error.message}/> }

      
       
        <FormItem label="Email" colon={false} style={{ marginBottom: "0px" }}>
          {getFieldDecorator('email', {
            rules: [{
              type: 'email', message: 'Invalid email address',
            }, {
              required: true, message: 'Please input your email address',
            }],
          })(
            <Input placeholder="Enter email" />
          )}
        </FormItem>
        

{/*  */}

        <FormItem label="First Name" colon={false} style={{ marginBottom: "0px" }}>
          {getFieldDecorator('First Name', {
            rules: [{
              required: true, message: 'Please enter your First Name',
            }],
          })(
            <Input type="text" placeholder="Enter Your First Name"/>
          )}
        </FormItem>


        <FormItem label="Last Name" colon={false}  style={{ marginBottom: "0px" }}>
          {getFieldDecorator('Last Name', {
            rules: [{
              required: true, message: 'Please enter your Last Name',
            }],
          })(
            <Input type="text" placeholder="Enter Your Last Name"/>
          )}
        </FormItem>

        <FormItem label="Company Name" colon={false}  style={{ marginBottom: "0px" }}>
          {getFieldDecorator('Company Name', {
            rules: [{
              required: true, message: 'Please enter your Company Name',
            }],
          })(
            <Input type="text" placeholder="Enter Your Company Name"/>
          )}
        </FormItem>


        <FormItem label="Password" colon={false}  style={{ marginBottom: "0px" }}>
          {getFieldDecorator('password1', {
            rules: [{
              required: true, message: 'Please choose a password',
            }, {
              validator: this.validateToNextPassword,
            }],
          })(
            <Input type="password" placeholder="Enter password"/>
          )}
        </FormItem>
        <FormItem label="Confirm Password" colon={false}  style={{ marginBottom: "0px" }}>
          {getFieldDecorator('password2', {
            rules: [{
              required: true, message: 'Please confirm your password',
            }, {
              validator: this.compareToFirstPassword,
            }],
          })(
            <Input type="password" onBlur={this.handleConfirmBlur} placeholder="Confirm password" />
          )}
        </FormItem>

        <FormItem>
          <Button type="primary" htmlType="submit" id="submitButton">Register</Button>
        </FormItem>
      </Form>
    );
  }
}

const WrappedRegistrationForm = Form.create()(RegistrationForm);
export default withRouter(WrappedRegistrationForm)

我很感激你的帮助！