Next.js中异步表单提交的加载指示：loading.tsx不生效及解决方案

'use client'; // 确保这是一个客户端组件

import { useState } from 'react';
import { redirect } from 'next/navigation'; // 如果redirect是在客户端触发

// 假设这些函数在其他地方定义，例如Server Actions
// import { createUserFromForm, setUserDataAtClerk } from '@/lib/actions'; 

export default function OnboardingForm({ clerkUserId, emailAddress }) {
  const [isLoading, setIsLoading] = useState(false); // 定义局部加载状态

  async function handleFormData(formData: FormData) {
    setIsLoading(true); // 异步操作开始前，设置加载状态为true
    try {
      const result = await createUserFromForm(
        formData,
        clerkUserId as string,
        emailAddress as string
      );

      if (result) {
        await setUserDataAtClerk(
          clerkUserId as string,
          formData.get('firstName') as string,
          formData.get('lastName') as string
        );
        redirect('/dashboard'); // 成功后重定向
      } else {
        console.error('User could not be created from form data');
        // 可以添加用户友好的错误提示
      }
    } catch (error) {
      console.error('An error occurred during form submission:', error);
      // 处理错误，例如显示错误消息给用户
    } finally {
      setIsLoading(false); // 无论成功或失败，异步操作结束后，设置加载状态为false
    }
  }

  return (
    <form action={handleFormData}>
      {/* 表单字段 */}
      <input type="text" name="firstName" placeholder="First Name" />
      <input type="text" name="lastName" placeholder="Last Name" />
      <button type="submit" disabled={isLoading}>
        {isLoading ? '处理中...' : '提交'} {/* 根据加载状态显示不同文本 */}
      </button>

      {/* 也可以在这里渲染一个独立的加载组件 */}
      {/* {isLoading && <CustomLoadingComponent />} */}
    </form>
  );
}

// 假设的 Server Actions 或其他异步函数
async function createUserFromForm(formData: FormData, userId: string, email: string) {
  // 模拟异步操作
  return new Promise(resolve => setTimeout(() => resolve(true), 2000)); 
}

async function setUserDataAtClerk(userId: string, firstName: string, lastName: string) {
  // 模拟异步操作
  return new Promise(resolve => setTimeout(() => resolve(true), 1000));
}