Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Fix the flickering of the Proceed to Checkout button on quantity update in the Cart Block #4293

Merged
merged 1 commit into from Jun 2, 2021
Merged

Fix the flickering of the Proceed to Checkout button on quantity update in the Cart Block #4293

merged 1 commit into from Jun 2, 2021

Conversation

senadir
Copy link
Member

@senadir senadir commented May 31, 2021 •
edited by ralucaStan

In #3314 we introduced previousIsPendingQuantity and previousIsPendingDelete to fix an issue with checkout button flickering on quantity changes.

After refactoring it over time, the issue surfaced again, deleting the code added in that PR fixed the issue.

Currently, we set isCalculating to true if we have quantity pending in our store, or if we're deleting an item. The other new part of this PR is that we also set isCalculating in the debouncing period, this is to fix a delay between clicking update and the button is greyed out.

Fixes #4289

How to test the changes in this Pull Request:

  1. Smoke test Cart block, make sure changing quantity works fine.
  2. Make sure removing items works fine.
  3. When changing an item quantity, make sure the button is disabled immediately as you change the quantity and is re-enabled once the server request finishes

Changelog

Fix the flickering of the Proceed to Checkout button on quantity update in the Cart Block

@senadir senadir added type: bug The issue/PR concerns a confirmed bug. block: cart Issues related to the cart block. labels May 31, 2021
@senadir senadir self-assigned this May 31, 2021
@senadir senadir requested a review from a team as a code owner May 31, 2021 14:27
@senadir senadir requested review from ralucaStan and Aljullu and removed request for a team May 31, 2021 14:27
@github-actions
Copy link
Contributor

Size Change: -28 B (0%)

Total Size: 985 kB

Filename Size Change
build/cart-frontend.js 77.7 kB -15 B (0%)
build/cart.js 44.1 kB -13 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/active-filters-frontend.js 7.98 kB 0 B
build/active-filters.js 7.5 kB 0 B
build/all-products-frontend.js 34.7 kB 0 B
build/all-products.js 36.5 kB 0 B
build/all-reviews.js 9.15 kB 0 B
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.4 kB 0 B
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.95 kB 0 B
build/atomic-block-components/add-to-cart--atomic-block-components/image--atomic-block-components/title.js 334 B 0 B
build/atomic-block-components/add-to-cart-frontend.js 8.75 kB 0 B
build/atomic-block-components/add-to-cart.js 7.8 kB 0 B
build/atomic-block-components/button-frontend.js 1.73 kB 0 B
build/atomic-block-components/button.js 844 B 0 B
build/atomic-block-components/category-list-frontend.js 469 B 0 B
build/atomic-block-components/category-list.js 478 B 0 B
build/atomic-block-components/image-frontend.js 1.66 kB 0 B
build/atomic-block-components/image.js 1.3 kB 0 B
build/atomic-block-components/price-frontend.js 1.98 kB 0 B
build/atomic-block-components/price.js 2 kB 0 B
build/atomic-block-components/rating-frontend.js 521 B 0 B
build/atomic-block-components/rating.js 525 B 0 B
build/atomic-block-components/sale-badge-frontend.js 469 B 0 B
build/atomic-block-components/sale-badge.js 475 B 0 B
build/atomic-block-components/sku-frontend.js 389 B 0 B
build/atomic-block-components/sku.js 393 B 0 B
build/atomic-block-components/stock-indicator-frontend.js 569 B 0 B
build/atomic-block-components/stock-indicator.js 572 B 0 B
build/atomic-block-components/summary-frontend.js 906 B 0 B
build/atomic-block-components/summary.js 910 B 0 B
build/atomic-block-components/tag-list-frontend.js 464 B 0 B
build/atomic-block-components/tag-list.js 472 B 0 B
build/atomic-block-components/title-frontend.js 1.4 kB 0 B
build/atomic-block-components/title.js 1.26 kB 0 B
build/attribute-filter-frontend.js 17.7 kB 0 B
build/attribute-filter.js 11.4 kB 0 B
build/blocks-checkout-editor.js 10.4 kB 0 B
build/blocks-checkout.js 19.7 kB 0 B
build/blocks.js 3.5 kB 0 B
build/checkout-frontend.js 81.7 kB 0 B
build/checkout.js 46.4 kB 0 B
build/editor-rtl.css 14.9 kB 0 B
build/editor.css 14.9 kB 0 B
build/featured-category.js 7.22 kB 0 B
build/featured-product.js 9.4 kB 0 B
build/handpicked-products.js 5.88 kB 0 B
build/price-filter-frontend.js 14.2 kB 0 B
build/price-filter.js 9.28 kB 0 B
build/price-format.js 1.38 kB 0 B
build/product-best-sellers.js 6.11 kB 0 B
build/product-categories.js 3.24 kB 0 B
build/product-category.js 6.98 kB 0 B
build/product-new.js 6.27 kB 0 B
build/product-on-sale.js 6.61 kB 0 B
build/product-search.js 2.55 kB 0 B
build/product-tag.js 6.09 kB 0 B
build/product-top-rated.js 6.25 kB 0 B
build/products-by-attribute.js 7.21 kB 0 B
build/reviews-by-category.js 11.2 kB 0 B
build/reviews-by-product.js 12.7 kB 0 B
build/reviews-frontend.js 8.94 kB 0 B
build/single-product-frontend.js 38.1 kB 0 B
build/single-product.js 9.64 kB 0 B
build/style-rtl.css 18.8 kB 0 B
build/style.css 18.8 kB 0 B
build/vendors--atomic-block-components/price-frontend.js 6.54 kB 0 B
build/vendors-style-rtl.css 1.05 kB 0 B
build/vendors-style.css 1.05 kB 0 B
build/vendors.js 242 kB 0 B
build/wc-blocks-data.js 10.6 kB 0 B
build/wc-blocks-google-analytics.js 1.99 kB 0 B
build/wc-blocks-middleware.js 1.48 kB 0 B
build/wc-blocks-registry.js 2.75 kB 0 B
build/wc-payment-method-bacs.js 812 B 0 B
build/wc-payment-method-cheque.js 807 B 0 B
build/wc-payment-method-cod.js 903 B 0 B
build/wc-payment-method-paypal.js 844 B 0 B
build/wc-payment-method-stripe.js 12.4 kB 0 B
build/wc-settings.js 2.94 kB 0 B
build/wc-shared-context.js 1.54 kB 0 B
build/wc-shared-hocs.js 1.73 kB 0 B

compressed-size-action

Aljullu
Aljullu approved these changes Jun 1, 2021
View reviewed changes
Copy link
Contributor

@Aljullu Aljullu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works fine for me and having split the useEffect() in two is great. 🚢

@senadir senadir merged commit 11a678a into trunk Jun 2, 2021
@senadir senadir deleted the fix/butto-flicker branch June 2, 2021 13:52
@ralucaStan ralucaStan added this to the 5.3.0 milestone Jun 7, 2021
@ralucaStan ralucaStan changed the title Fix flickering in checkout button when updating quantity in Cart. Fix flickering of the Proceed to Checkout button when updating the quantity in the Cart Block Jun 7, 2021
@ralucaStan ralucaStan changed the title Fix flickering of the Proceed to Checkout button when updating the quantity in the Cart Block Fix the flickering of the Proceed to Checkout button when updating the quantity in the Cart Block Jun 7, 2021
@ralucaStan ralucaStan changed the title Fix the flickering of the Proceed to Checkout button when updating the quantity in the Cart Block Fix the flickering of the Proceed to Checkout button on quantity update in the Cart Block Jun 7, 2021
@ralucaStan ralucaStan mentioned this pull request Jun 9, 2021
Merged
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@Aljullu Aljullu Aljullu approved these changes

@ralucaStan ralucaStan Awaiting requested review from ralucaStan

Assignees

@senadir senadir

Labels
block: cart Issues related to the cart block. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Milestone
5.3.0
Development

Successfully merging this pull request may close these issues.

"Proceed to Checkout" button flickers when changing quantity or removing item
3 participants
@senadir @Aljullu @ralucaStan