"Add to bag" & cart dynamic states

[mynameisadamf]

Motivation

Right now there is a pause when an item is added to the bag. On slower networks (3g) the pause is about 5+ seconds. In relation we do do provide any feedback in the cart when quantity has been increased or decreased as there is a pause as well before the total is updated.

Opportunity

Always provide feedback to the shopper that something is happening on the backend. Even with optimistic UI that happens instant, we should show validations of successfully added and remove

Brainstorm features & functionality:

• Add to bag button, reads "adding..." or "adding to bag..." loader OR Just loading animation
• Checkmark confirmation when added to card "Added ✓" on add to bag button
• Remove from cart validation in cart
• Quantity change loader in cart

[blittle]

@mynameisadamf could you add some more details to this?

[mynameisadamf]

@blittle dropped in some initial thoughts around this.

[mhmdjaw]

Any updates on this? Or at least is there a workaround to show loading states when making cart changes?

[blittle]

This is resolved with the new useOptimisticCart() hook: https://github.com/Shopify/hydrogen/blob/main/packages/hydrogen/src/cart/optimistic/useOptimisticCart.tsx