fix(shop): cart panel slide animation + concurrent delete race

Animation: replaced nonexistent tailwindcss-animate classes with real
CSS keyframes in app.css. Panel now slides in from the right with a
fade, and slides out on close.

Concurrent deletes: replaced isMutating() check with an explicit
module-level counter (cartMutationsInFlight). The isMutating semantics
at onSettled time are ambiguous across React Query versions — the
counter is unambiguous: increment in onMutate, decrement in onSettled,
invalidate at zero. This prevents a settled mutation's refetch from
bringing back an item that was optimistically removed by a concurrent
mutation still in flight.

Author: tannerlinsley

src/components/shop/CartDrawer.tsx

@@ -26,24 +26,16 @@ export function CartDrawer({ open, onOpenChange }: CartDrawerProps) {
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
       <Dialog.Portal>
-        <Dialog.Overlay
-          className={twMerge(
-            'fixed inset-0 z-[100] bg-black/20',
-            'data-[state=open]:animate-in data-[state=open]:fade-in-0',
-            'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
-          )}
-        />
+        <Dialog.Overlay className="cart-overlay fixed inset-0 z-[100] bg-black/20" />
         <Dialog.Content
           className={twMerge(
+            'cart-panel',
             'fixed right-4 top-[calc(var(--navbar-height,56px)+0.5rem)] z-[100]',
             'w-[calc(100vw-2rem)] sm:w-[24rem]',
             'max-h-[calc(100dvh-var(--navbar-height,56px)-1rem)]',
             'flex flex-col',
             'rounded-xl shadow-2xl',
             'bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800',
-            'data-[state=open]:animate-in data-[state=open]:slide-in-from-right-5 data-[state=open]:fade-in-0',
-            'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right-5 data-[state=closed]:fade-out-0',
-            'duration-200',
           )}
           aria-describedby={undefined}
         >

src/hooks/useCart.ts

@@ -26,25 +26,31 @@ export const CART_QUERY_KEY = ['shopify', 'cart'] as const
 const CART_MUTATION_KEY = ['shopify', 'cart', 'mutate'] as const
 
 /**
- * Only invalidate (refetch from server) when no other cart mutations are
- * in flight. This prevents a settled mutation's refetch from overwriting
- * another mutation's optimistic state with stale server data.
- *
- * Each `onMutate` reads the *current* cache (which may already reflect
- * earlier optimistic writes) and layers its own change on top. When the
- * last mutation settles, the refetch reconciles everything with the
- * server's final truth.
+ * Explicit in-flight counter. We don't rely on `queryClient.isMutating()`
+ * because its exact semantics at `onSettled` time (does it still count the
+ * current mutation?) vary across React Query versions and are under-documented.
+ * A module-level counter is unambiguous: increment in onMutate, decrement in
+ * onSettled, invalidate when the count hits zero.
+ */
+let cartMutationsInFlight = 0
+
+function trackMutationStart() {
+  cartMutationsInFlight++
+}
+
+/**
+ * Call from every cart mutation's `onSettled`. Decrements the in-flight
+ * counter, and when the last mutation settles, triggers a single background
+ * refetch to reconcile all accumulated optimistic changes with server truth.
  *
  * Returns the invalidation promise so the mutation stays in `isPending`
- * until the background refetch completes (per TkDodo's recommendation).
+ * until the refetch completes.
  *
  * @see https://tkdodo.eu/blog/concurrent-optimistic-updates-in-react-query
  */
 function settleWhenIdle(qc: ReturnType<typeof useQueryClient>) {
-  // isMutating counts mutations that haven't settled yet. At the time
-  // onSettled fires, the *current* mutation is still counted, so
-  // 1 means "I'm the last one in flight."
-  if (qc.isMutating({ mutationKey: CART_MUTATION_KEY }) === 1) {
+  cartMutationsInFlight = Math.max(0, cartMutationsInFlight - 1)
+  if (cartMutationsInFlight === 0) {
     return qc.invalidateQueries({ queryKey: CART_QUERY_KEY })
   }
 }
@@ -108,6 +114,7 @@ export function useAddToCart() {
       }),
 
     onMutate: async (input) => {
+      trackMutationStart()
       const quantity = input.quantity ?? 1
       await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
       const previous = qc.getQueryData<CartDetail | null>(CART_QUERY_KEY)
@@ -193,6 +200,7 @@ export function useUpdateCartLine() {
       updateCartLine({ data: input }),
 
     onMutate: async (input) => {
+      trackMutationStart()
       await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
       const previous = qc.getQueryData<CartDetail | null>(CART_QUERY_KEY)
       if (previous) {
@@ -227,6 +235,7 @@ export function useRemoveCartLine() {
     mutationFn: (input: { lineId: string }) => removeCartLine({ data: input }),
 
     onMutate: async (input) => {
+      trackMutationStart()
       await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
       const previous = qc.getQueryData<CartDetail | null>(CART_QUERY_KEY)
       if (previous) {
@@ -259,6 +268,7 @@ export function useApplyDiscountCode() {
     mutationFn: (input: { code: string }) =>
       applyDiscountCode({ data: { code: input.code } }),
     onMutate: async () => {
+      trackMutationStart()
       await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
     },
     onSuccess: (cart) => {
@@ -274,6 +284,7 @@ export function useRemoveDiscountCode() {
     mutationKey: CART_MUTATION_KEY,
     mutationFn: () => removeDiscountCode(),
     onMutate: async () => {
+      trackMutationStart()
       await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
       const previous = qc.getQueryData<CartDetail | null>(CART_QUERY_KEY)
       if (previous) {

src/styles/app.css

@@ -1060,6 +1060,63 @@ mark {
   animation: dropdown-out 100ms ease-in;
 }
 
+/* Cart panel slide-in from right */
+@keyframes cart-panel-in {
+  from {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes cart-panel-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+}
+
+@keyframes cart-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes cart-overlay-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.cart-panel[data-state='open'] {
+  animation: cart-panel-in 200ms ease-out;
+}
+
+.cart-panel[data-state='closed'] {
+  animation: cart-panel-out 150ms ease-in;
+}
+
+.cart-overlay[data-state='open'] {
+  animation: cart-overlay-in 200ms ease-out;
+}
+
+.cart-overlay[data-state='closed'] {
+  animation: cart-overlay-out 150ms ease-in;
+}
+
 /* Doc Feedback Styles */
 .doc-feedback-block {
   transition: