Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make image, variant, and cart updates faster with useOptimistic #1365

Merged
merged 14 commits into from
Jul 29, 2024

Conversation

leerob
Copy link
Member

@leerob leerob commented Jul 28, 2024

  • All cart operations are now optimistic: In the root layout, we pass a fetch for the cart down to a context provider, which wraps the rest of the application. This allows us to get access to the cart in both the navbar, as well as lower in the tree for the add to cart button on the product page.
    • When you click on +/- clicking, Server Actions are kicked off and queued behind each other. We want this behavior because we want to ensure the writes happen successfully. Once all the writes have settled, the optimistic state is effectively dissolved, because we are now in sync with the server state.
    • If you try to navigate to the checkout, this also uses a Server Action is ensure it's put into the same queue. This means that all cart mutations will need to be settled before navigating to the cart, to ensure it always has the correct values. When this is pending, a loading state is shown on the checkout button.
    • If you try to add an item to the cart for the first time, before a cart has been created, this also creates an optimistic cart so we can instantly open up the cart modal and start editing the quantity. When the cart model mounts on the client, a server action is called to create the cart and save the ID as a cookie.
  • Changing images and variants are also optimistic: Other product operations also have a context provider, where mutations to the URL state happen after useOptimistic. This centralizes the logic into a single place.

Other Improvements

  • Add a welcome toast linking to the template / source code
  • Improve the loading skeleton for search in dark mode
  • Improve the size of the delete buttons in the cart
  • Improve the tap area of the +/- buttons in the cart
  • Truncate product images to first 5
  • Fix input zoom on Safari iOS by setting font size to 16px

Copy link

vercel bot commented Jul 28, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
commerce-shopify ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 29, 2024 3:57am

@leerob leerob marked this pull request as ready for review July 28, 2024 22:55
@leerob leerob changed the title More optimistic cart Make image, variant, and cart updates faster with useOptimistic Jul 28, 2024
@leerob leerob merged commit 9a4c995 into main Jul 29, 2024
4 checks passed
@leerob leerob deleted the full-cart-optimistic branch July 29, 2024 03:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant