Next.js中表单提交时loading.tsx不显示的问题咨询

为什么loading.tsx不显示？ #

不是因为handleFormData是异步函数本身，而是Next.js App Router下的loading.tsx是页面路由级别的加载组件，仅在导航到对应页面（比如/dashboard）的过程中触发。而你的场景是在当前页面提交表单、执行Server Action后直接跳转，表单提交过程的加载状态并不会自动触发loading.tsx——它只负责目标页面的初始/导航加载，无法覆盖表单提交到跳转之间的客户端状态。

如何在表单处理期间显示加载状态？ #

可以使用React的useFormStatus钩子（Next.js内置支持），在客户端监听表单的提交状态，手动渲染加载提示。具体步骤如下：

1. 标记客户端组件：使用useFormStatus的组件需要是客户端组件，在组件顶部添加'use client'指令。
2. 使用useFormStatus获取提交状态：该钩子会自动关联最近的父表单，返回pending（是否正在提交）等状态。
3. 渲染加载提示：根据pending状态显示加载文本或按钮状态。

代码示例

首先修改表单组件：

'use client';

import { useFormStatus } from 'react-dom';

// 封装带加载状态的提交按钮
function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? '提交中...' : '完成注册'}
    </button>
  );
}

export default function OnboardingForm() {
  // 你的其他逻辑（如clerkUserId、emailAddress的获取）

  return (
    <form action={handleFormData}>
      {/* 表单输入字段 */}
      <input type="text" name="firstName" placeholder="名" required />
      <input type="text" name="lastName" placeholder="姓" required />
      
      <SubmitButton />
    </form>
  );
}

补充：Server Action的标记

如果handleFormData是在客户端组件中定义的，需要添加'use server'指令标记为Server Action：

'use server';

async function handleFormData(formData: FormData) {
  // 原函数逻辑不变
}

额外说明 #

如果需要在表单提交期间显示全屏加载提示（类似loading.tsx的效果），可以直接在组件中根据pending状态渲染覆盖层：

'use client';

import { useFormStatus } from 'react-dom';

export default function OnboardingForm() {
  const { pending } = useFormStatus();

  return (
    <>
      {pending && (
        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <h2>LOADING...</h2>
        </div>
      )}
      
      <form action={handleFormData}>
        {/* 表单内容 */}
        <SubmitButton />
      </form>
    </>
  );
}

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