useFormStatus 创建的可重复使用的 SubmitButton

在 NextJS 中使用 React 的 useFormStatus Hooks 来创建一个可重复使用的 SubmitButton 组件
文章：Creating a Reusable SubmitButton with UseFormStatus | Aurora Scharff
源码：next14-remix-contacts-rebuild-v2/components/ui/SubmitButton.tsx at main · aurorascharff/next14-remix-contacts-rebuild-v2 · GitHub

import React from "react";
import { useFormStatus } from "react-dom";
import Button from "./Button";
import { SpinnerIcon } from "./icons";
 
type Props = {
  theme?: "primary" | "secondary" | "destroy";
  children: React.ReactNode;
  className?: string;
  loading?: boolean;
};
 
export default function SubmitButton({
  children,
  theme = "primary",
  loading,
  disabled,
  className,
  ...otherProps
}: Props & React.HTMLProps<HTMLButtonElement>) {
  const { pending } = useFormStatus();
  const isSubmitting = pending || loading;
 
  return (
    <Button theme={theme} {...otherProps} disabled={isSubmitting || disabled} type='submit' className={className}>
      {isSubmitting ? (
        <div className='flex items-center justify-center gap-2'>
          {children}
          <div className='h-fit w-fit animate-spin'>
            <SpinnerIcon width={16} height={16} className={theme === "secondary" ? "text-gray-dark" : "text-white"} />
          </div>
        </div>
      ) : (
        children
      )}
    </Button>
  );
}