Quantity sync bar component

Description Reference image
Quantity selector updating Quantity selector updating
Quantity selector updated Quantity selector updated

Page states

  • First load - As the page loads, the bar loads with the current quantity
  • Offline - The bar turns gray, but the most recent quantity is still shown.
  • Reload - When the page come back online or reloaded by the user, the bar has a spinner that indicates it is syncing and updating the quantity.
  • Cached - On revisits, the bar has a spinner that indicates it is syncing and updating the quantity.