实现加载屏幕反应

Question

所以我有这个反应/节点应用程序，基本上当我在输入所有详细信息后点击注册时，它会将我带到条带结帐页面。但是，在没有调用 2-3 分钟后，我一直在阅读 firebase 进入 cold start。这是一个问题，因为我们预计在接下来的 6 个月内不会有大量流量进入我们的应用程序，这意味着不会每 2-3 分钟就有一个人使用该应用程序。

现在，在注册和条带结帐之间的limbo 期间，它进入白屏，大约 8 秒。我怎样才能让它成为一个加载屏幕，就像其中一个响应旋转加载器作为临时修复，这样我们的客户就不会担心应用程序会在他们身上中断？

这是我的注册页面代码，然后是调用条带的函数：

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)

我是新来的反应，所以如果有什么我可以做的让代码更容易阅读或任何事情，请告诉我。我不确定如何创建或放置加载微调器

Answer 1

您将需要实现一个显示在您的基本 HTML 文件中的加载默认值，它位于您的公共目录中，名称为 index.html。

请参考这个答案：https://stackoverflow.com/a/60404990/2301161