React注册跳转Stripe流程实现加载屏解决Firebase冷启动白屏问题

核心实现思路 #

白屏本质是提交注册后，从表单提交到Stripe页面跳转的空窗期没有对应UI渲染，用户无操作反馈。我们可以通过React组件状态控制，在整个异步流程期间展示全屏旋转加载屏，替代原有白屏。
这种方案可以完全覆盖Firebase冷启动带来的8秒空窗期：从用户点击注册的第一刻开始，加载屏就会立刻渲染，直到浏览器跳转到Stripe结账页的瞬间，全程没有无反馈的白屏阶段。 #

具体改造步骤 #

1. 补充组件状态 #

在组件初始state中新增提交加载标识，用于控制加载屏的显示隐藏：

state = {
  confirmDirty: false,
  isSubmitting: false, // 新增：标识当前是否处于异步提交阶段
  error: null
}

不需要额外安装第三方加载组件：你当前项目已经使用Ant Design组件库，直接使用库自带的Spin旋转组件即可，样式和现有UI保持统一，文件顶部引入对应组件即可：

import { Spin, Alert, Form, Input, Button } from 'antd';

2. 重构提交逻辑，修正原有流程时序问题 #

你原有代码存在流程冗余问题：通过全局onAuthStateChanged监听拿用户ID的写法时序不可控，且会导致异步流程无法统一追踪。实际上注册接口的返回值本身就包含用户uid，不需要额外监听：

onSubmit = (event) => {
  event.preventDefault();
  // 点击提交第一时间触发加载状态
  this.setState({ isSubmitting: true, error: null })

  this.props.form.validateFields((err, values) => {
    if (err) {
      // 表单校验失败时，退出加载状态
      this.setState({ isSubmitting: false })
      return
    }

    // 直接从校验返回的values对象取字段，替代反复调用getFieldValue的写法
    const {
      email,
      password1: passwordOne,
      'First Name': firstName,
      'Last Name': lastName,
      'Company Name': companyName
    } = values

    // 用Promise链串起所有异步步骤，全程追踪执行状态
    AuthorizationHome.doCreateUserWithEmailAndPassword(email, passwordOne)
      .then((authUser) => {
        const uid = authUser.user.uid
        // 第一步：创建用户基础记录
        return facades.userFacade().doCreateUser(uid, email)
          // 第二步：写入profiledata集合的详细字段
          .then(() => firestore.collection('profiledata').doc(uid).set({
            firstname: firstName,
            lastname: lastName,
            companyname: companyName,
            accountStatus: "inactive",
          }))
          // 第三步：调用Stripe创建结账会话（等这步返回后浏览器就会跳转到Stripe页面）
          .then(() => createCheckoutSession(uid))
      })
      .catch(error => {
        // 任意步骤报错时，退出加载状态，展示错误信息
        this.setState({ isSubmitting: false, error })
      })
  })
}

重构后移除了原有冗余的onAuthStateChanged嵌套逻辑：这个API是全应用级别的登录状态监听器，不适合用来处理单次注册流程的取值需求，容易出现流程时序错乱。
注意：请确保createCheckoutSession函数返回可等待的Promise对象，也就是在函数内部调用Stripe跳转之前完成所有异步逻辑，这样才能保证加载状态一直持续到跳转到Stripe页面的瞬间。

3. 在render逻辑中加入加载屏渲染 #

当处于提交加载状态时，直接返回全屏加载组件，替代原有表单页面：

render() {
  const { getFieldDecorator } = this.props.form
  const { error, isSubmitting } = this.state

  // 加载状态下渲染全屏加载屏
  if (isSubmitting) {
    return (
      <div style={{
        position: 'fixed',
        inset: 0,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        gap: '16px',
        backgroundColor: '#fff'
      }}>
        <Spin size="large" />
        <p style={{ color: 'rgba(0, 0, 0, 0.65)' }}>正在为您跳转到结账页面，请稍候...</p>
      </div>
    )
  }

  // 原有表单正常渲染
  return (
    <Form onSubmit={this.onSubmit} hideRequiredMark={true} className="registration-form" style={{ marginBottom: "0px" }}>
      { error && <Alert type="error" message={error.message}/> }

      {/* 此处保留你原有的所有FormItem表单项代码 */}

      <FormItem>
        <Button 
          type="primary" 
          htmlType="submit" 
          id="submitButton"
          loading={isSubmitting} // 按钮增加加载状态，自动禁用重复点击
        >
          Register
        </Button>
      </FormItem>
    </Form>
  )
}

新手友好的代码优化点 #

• 移除顶层全局变量userIDStripeSubmit：全局变量在多标签、多用户场景下会出现数据串值的问题，现在所有用户ID都在Promise链内部传递，不需要全局存储
• 统一错误提示逻辑：原有代码中Firestore写入失败时调用alert()弹窗，建议统一使用页面内的Alert组件展示错误，保持交互一致性
• 减少重复取值：原来在回调中多次调用this.props.form.getFieldValue()的写法，可以直接复用validateFields返回的values对象，代码更简洁
• 防重复提交：给提交按钮加loading属性后，按钮会自动禁用，避免用户在加载过程中多次点击触发重复请求

内容的提问来源于stack exchange，提问作者roger