Updates

components/cart/add-to-cart.tsx

@@ -6,7 +6,6 @@ import { addItem } from 'components/cart/actions';
 import LoadingDots from 'components/loading-dots';
 import { ProductVariant } from 'lib/shopify/types';
 import { useSearchParams } from 'next/navigation';
-import { useTransition } from 'react';
 import {
   // @ts-ignore
   experimental_useFormState as useFormState,
@@ -50,7 +49,9 @@ function SubmitButton({
 
   return (
     <button
-      type="submit"
+      onClick={(e: React.FormEvent<HTMLButtonElement>) => {
+        if (pending) e.preventDefault();
+      }}
       aria-label="Add to cart"
       aria-disabled={pending}
       className={clsx(buttonClasses, {
@@ -73,7 +74,6 @@ export function AddToCart({
   variants: ProductVariant[];
   availableForSale: boolean;
 }) {
-  const [isPending, startTransition] = useTransition();
   const [message, formAction] = useFormState(addItem, null);
   const searchParams = useSearchParams();
   const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
@@ -85,16 +85,8 @@ export function AddToCart({
   const selectedVariantId = variant?.id || defaultVariantId;
   const actionWithVariant = formAction.bind(null, selectedVariantId);
 
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    if (isPending) {
-      event.preventDefault();
-    } else {
-      startTransition(actionWithVariant);
-    }
-  };
-
   return (
-    <form action={actionWithVariant} onSubmit={handleSubmit}>
+    <form action={actionWithVariant}>
       <SubmitButton availableForSale={availableForSale} selectedVariantId={selectedVariantId} />
       <p aria-live="polite" className="sr-only" role="status">
         {message}

components/cart/delete-item-button.tsx

@@ -5,7 +5,6 @@ import clsx from 'clsx';
 import { removeItem } from 'components/cart/actions';
 import LoadingDots from 'components/loading-dots';
 import type { CartItem } from 'lib/shopify/types';
-import { useTransition } from 'react';
 import {
   // @ts-ignore
   experimental_useFormState as useFormState,
@@ -18,6 +17,9 @@ function SubmitButton() {
   return (
     <button
       type="submit"
+      onClick={(e: React.FormEvent<HTMLButtonElement>) => {
+        if (pending) e.preventDefault();
+      }}
       aria-label="Remove cart item"
       aria-disabled={pending}
       className={clsx(
@@ -37,21 +39,12 @@ function SubmitButton() {
 }
 
 export function DeleteItemButton({ item }: { item: CartItem }) {
-  const [isPending, startTransition] = useTransition();
   const [message, formAction] = useFormState(removeItem, null);
   const itemId = item.id;
   const actionWithVariant = formAction.bind(null, itemId);
 
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    if (isPending) {
-      event.preventDefault();
-    } else {
-      startTransition(actionWithVariant);
-    }
-  };
-
   return (
-    <form action={actionWithVariant} onSubmit={handleSubmit}>
+    <form action={actionWithVariant}>
       <SubmitButton />
       <p aria-live="polite" className="sr-only" role="status">
         {message}

components/cart/edit-item-quantity-button.tsx

@@ -5,7 +5,6 @@ import clsx from 'clsx';
 import { updateItemQuantity } from 'components/cart/actions';
 import LoadingDots from 'components/loading-dots';
 import type { CartItem } from 'lib/shopify/types';
-import { useTransition } from 'react';
 import {
   // @ts-ignore
   experimental_useFormState as useFormState,
@@ -18,6 +17,9 @@ function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
   return (
     <button
       type="submit"
+      onClick={(e: React.FormEvent<HTMLButtonElement>) => {
+        if (pending) e.preventDefault();
+      }}
       aria-label={type === 'plus' ? 'Increase item quantity' : 'Reduce item quantity'}
       aria-disabled={pending}
       className={clsx(
@@ -40,7 +42,6 @@ function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
 }
 
 export function EditItemQuantityButton({ item, type }: { item: CartItem; type: 'plus' | 'minus' }) {
-  const [isPending, startTransition] = useTransition();
   const [message, formAction] = useFormState(updateItemQuantity, null);
   const payload = {
     lineId: item.id,
@@ -49,16 +50,8 @@ export function EditItemQuantityButton({ item, type }: { item: CartItem; type: '
   };
   const actionWithVariant = formAction.bind(null, payload);
 
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    if (isPending) {
-      event.preventDefault();
-    } else {
-      startTransition(actionWithVariant);
-    }
-  };
-
   return (
-    <form action={actionWithVariant} onSubmit={handleSubmit}>
+    <form action={actionWithVariant}>
       <SubmitButton type={type} />
       <p aria-live="polite" className="sr-only" role="status">
         {message}