Extending the tutorial app's loading/suspense behavior to delete invoice

[don-esteban]

Hi all,

I simulate a slow deleteInvoice() Server Action. No loading state/indicator applies. Perhaps, it is worth to enhance the tutorial with a best practice pattern. Or just read here about my solution. It is based on this chapter "Pending states" and could serve as a starting point for more advanced solutions.

1. Slow down the deleteInvoice() Server Action

export async function deleteInvoice(id: string) {
  await new Promise((resolve) => setTimeout(resolve, 3000));
  // ... 

Play around and see that deleting invoices is confusing now.

2. Create a separate DeleteInvoiceButton client component

"use client"

import { TrashIcon, ClockIcon } from '@heroicons/react/24/outline';
import { useFormStatus } from 'react-dom';

export default function DeleteInvoiceButton() {
  const { pending } = useFormStatus();
  if (pending) {
    return (
      <button disabled className="rounded-md border p-2" aria-disabled>
        <ClockIcon className="w-5 text-gray-300" />
      </button>)
  } else {
    return (
      <button className="rounded-md border p-2 hover:bg-gray-100">
        <TrashIcon className="w-5" />
      </button>)
  }
}

3. Use this component in /app/ui/invoices/buttons.tsx

//...
import DeleteInvoiceButton from '@/app/ui/invoices/delete-invoice-button';
//...
export function DeleteInvoice({ id }: { id: string }) {
  const deleteInvoiceWithId = deleteInvoice.bind(null, id);
  return (
    <form action={deleteInvoiceWithId}>
      <DeleteInvoiceButton />
    </form>
  );
}
//...