1 files changed, 32 insertions, 4 deletions

diff --git a/src-migrate/pages/shop/cart/index.tsx b/src-migrate/pages/shop/cart/index.tsx
index eefe8d09..798ad318 100644
--- a/src-migrate/pages/shop/cart/index.tsx
+++ b/src-migrate/pages/shop/cart/index.tsx
@@ -329,24 +329,52 @@ const CartPage = () => {
     if (typeof auth !== 'object' || !cart) return;
 
     setIsLoadDelete(true);
-    checkboxUpdateState.startUpdate('delete_operation'); // Use special ID for delete
+    checkboxUpdateState.startUpdate('delete_operation');
 
     try {
       const itemsToDelete = cart.products.filter((item) => item.selected);
       const itemIdsToDelete = itemsToDelete.map((item) => item.id);
+      const cartIdsToDelete = itemsToDelete.map((item) => item.cart_id);
 
+      // Step 1: Delete from server first
       for (const item of itemsToDelete) {
         await deleteUserCart(auth.id, [item.cart_id]);
       }
 
-      // Remove deleted items from cookie
-      removeSelectedItemsFromCookie(itemIdsToDelete);
+      // Step 2: Update local cart state immediately (optimistic update)
+      const updatedProducts = cart.products.filter((item) => !item.selected);
+      const updatedCart = {
+        ...cart,
+        products: updatedProducts,
+        product_total: updatedProducts.length,
+      };
+      updateCartItem(updatedCart);
 
-      await loadCart(auth.id);
+      // Step 3: Clean up cookies AFTER state update
+      removeSelectedItemsFromCookie(itemIdsToDelete);
+      removeCartItemsFromCookie(cartIdsToDelete);
+
+      // Step 4: Reload from server to ensure consistency (but don't wait for it to complete UI update)
+      loadCart(auth.id)
+        .then(() => {
+          console.log('Cart reloaded from server');
+        })
+        .catch((error) => {
+          console.error('Error reloading cart:', error);
+          // If reload fails, at least we have the optimistic update
+        });
+
+      // Step 5: Trigger context refresh
       setRefreshCart(true);
+
+      // Success feedback
+      toast.success('Item berhasil dihapus');
     } catch (error) {
       console.error('Failed to delete cart items:', error);
       toast.error('Gagal menghapus item');
+
+      // If deletion failed, reload cart to restore proper state
+      loadCart(auth.id);
     } finally {
       setIsLoadDelete(false);
       checkboxUpdateState.endUpdate('delete_operation');