From af21b29b737461722166bd16fb50bb550ed53414 Mon Sep 17 00:00:00 2001
From: Michael Novotny <manovotny@gmail.com>
Date: Tue, 25 Apr 2023 09:38:47 -0500
Subject: [PATCH] Disables `Add to Cart` while mutating (#987)

---
 components/product/add-to-cart.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/components/product/add-to-cart.tsx b/components/product/add-to-cart.tsx
index 6ca32c0ad..9da11bafa 100644
--- a/components/product/add-to-cart.tsx
+++ b/components/product/add-to-cart.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState, useTransition } from 'react';
 
@@ -62,10 +63,15 @@ export function AddToCart({
   return (
     <button
       aria-label="Add item to cart"
+      disabled={isMutating}
       onClick={handleAdd}
-      className={`${
-        availableForSale ? 'opacity-90 hover:opacity-100' : 'cursor-not-allowed opacity-60'
-      } flex w-full items-center justify-center bg-black p-4 text-sm uppercase tracking-wide text-white dark:bg-white dark:text-black`}
+      className={clsx(
+        'flex w-full items-center justify-center bg-black p-4 text-sm uppercase tracking-wide text-white opacity-90 hover:opacity-100 dark:bg-white dark:text-black',
+        {
+          'cursor-not-allowed opacity-60': !availableForSale,
+          'cursor-not-allowed': isMutating
+        }
+      )}
     >
       <span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
       {isMutating ? <LoadingDots className="bg-white dark:bg-black" /> : null}