Prevent double clicks

components/cart/actions.ts

@@ -5,7 +5,7 @@ import { addToCart, createCart, getCart, removeFromCart, updateCart } from 'lib/
 import { revalidateTag } from 'next/cache';
 import { cookies } from 'next/headers';
 
-export async function addItem(prevState: any, selectedVariantId: string) {
+export async function addItem(prevState: any, selectedVariantId: string | undefined) {
   let cartId = cookies().get('cartId')?.value;
   let cart;
 

components/cart/add-to-cart.tsx

@@ -6,6 +6,7 @@ import { addItem } from 'components/cart/actions';
 import LoadingDots from 'components/loading-dots';
 import { ProductVariant } from 'lib/shopify/types';
 import { useSearchParams } from 'next/navigation';
+import { useState } from 'react';
 import {
   // @ts-ignore
   experimental_useFormState as useFormState,
@@ -14,12 +15,15 @@ import {
 
 function SubmitButton({
   availableForSale,
-  selectedVariantId
+  selectedVariantId,
+  submitting
 }: {
   availableForSale: boolean;
   selectedVariantId: string | undefined;
+  submitting: boolean;
 }) {
-  const { pending } = useFormStatus();
+  let { pending } = useFormStatus();
+  pending = pending || submitting;
   const buttonClasses =
     'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white';
   const disabledClasses = 'cursor-not-allowed opacity-60 hover:opacity-60';
@@ -72,6 +76,7 @@ export function AddToCart({
   variants: ProductVariant[];
   availableForSale: boolean;
 }) {
+  const [submitting, setSubmitting] = useState(false);
   const [message, formAction] = useFormState(addItem, null);
   const searchParams = useSearchParams();
   const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
@@ -84,8 +89,22 @@ export function AddToCart({
   const actionWithVariant = formAction.bind(null, selectedVariantId);
 
   return (
-    <form action={actionWithVariant}>
-      <SubmitButton availableForSale={availableForSale} selectedVariantId={selectedVariantId} />
+    <form
+      action={actionWithVariant}
+      // Prevent double clicks
+      onClick={async (e) => {
+        e.preventDefault();
+        if (submitting) return;
+        setSubmitting(true);
+        await addItem(message, selectedVariantId);
+        setSubmitting(false);
+      }}
+    >
+      <SubmitButton
+        availableForSale={availableForSale}
+        selectedVariantId={selectedVariantId}
+        submitting={submitting}
+      />
       <p aria-live="polite" className="sr-only" role="status">
         {message}
       </p>

components/cart/delete-item-button.tsx

@@ -5,14 +5,16 @@ import clsx from 'clsx';
 import { removeItem } from 'components/cart/actions';
 import LoadingDots from 'components/loading-dots';
 import type { CartItem } from 'lib/shopify/types';
+import { useState } from 'react';
 import {
   // @ts-ignore
   experimental_useFormState as useFormState,
   experimental_useFormStatus as useFormStatus
 } from 'react-dom';
 
-function SubmitButton() {
-  const { pending } = useFormStatus();
+function SubmitButton({ submitting }: { submitting: boolean }) {
+  let { pending } = useFormStatus();
+  pending = pending || submitting;
 
   return (
     <button
@@ -36,13 +38,24 @@ function SubmitButton() {
 }
 
 export function DeleteItemButton({ item }: { item: CartItem }) {
+  const [submitting, setSubmitting] = useState(false);
   const [message, formAction] = useFormState(removeItem, null);
   const itemId = item.id;
   const actionWithVariant = formAction.bind(null, itemId);
 
   return (
-    <form action={actionWithVariant}>
-      <SubmitButton />
+    <form
+      action={actionWithVariant}
+      // Prevent double clicks
+      onClick={async (e) => {
+        e.preventDefault();
+        if (submitting) return;
+        setSubmitting(true);
+        await removeItem(message, itemId);
+        setSubmitting(false);
+      }}
+    >
+      <SubmitButton submitting={submitting} />
       <p aria-live="polite" className="sr-only" role="status">
         {message}
       </p>

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

@@ -5,14 +5,16 @@ import clsx from 'clsx';
 import { updateItemQuantity } from 'components/cart/actions';
 import LoadingDots from 'components/loading-dots';
 import type { CartItem } from 'lib/shopify/types';
+import { useState } from 'react';
 import {
   // @ts-ignore
   experimental_useFormState as useFormState,
   experimental_useFormStatus as useFormStatus
 } from 'react-dom';
 
-function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
-  const { pending } = useFormStatus();
+function SubmitButton({ type, submitting }: { type: 'plus' | 'minus'; submitting: boolean }) {
+  let { pending } = useFormStatus();
+  pending = pending || submitting;
 
   return (
     <button
@@ -39,6 +41,7 @@ function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
 }
 
 export function EditItemQuantityButton({ item, type }: { item: CartItem; type: 'plus' | 'minus' }) {
+  const [submitting, setSubmitting] = useState(false);
   const [message, formAction] = useFormState(updateItemQuantity, null);
   const payload = {
     lineId: item.id,
@@ -48,8 +51,18 @@ export function EditItemQuantityButton({ item, type }: { item: CartItem; type: '
   const actionWithVariant = formAction.bind(null, payload);
 
   return (
-    <form action={actionWithVariant}>
-      <SubmitButton type={type} />
+    <form
+      action={actionWithVariant}
+      // Prevent double clicks
+      onClick={async (e) => {
+        e.preventDefault();
+        if (submitting) return;
+        setSubmitting(true);
+        await updateItemQuantity(message, payload);
+        setSubmitting(false);
+      }}
+    >
+      <SubmitButton type={type} submitting={submitting} />
       <p aria-live="polite" className="sr-only" role="status">
         {message}
       </p>