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

Add Debounce to Shipping Calculation selection #8498

Merged
merged 7 commits into from
Mar 1, 2023
Merged

Add Debounce to Shipping Calculation selection #8498

merged 7 commits into from
Mar 1, 2023

Conversation

wavvves
Copy link
Contributor

@wavvves wavvves commented Feb 21, 2023

The Shipping rate selection was wrapped with debounce from lodash with a 1000ms interval to minimize extra calls made to Store API during quick selection between rates, preventing jankyness and waste of server resources.

Fixes #8423

Accessibility

Other Checks

  • This PR adds/removes a feature flag & I've updated this doc.
  • This PR adds/removes an experimental interfaces and I've updated this doc.
  • I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

User Facing Testing

  1. Add the Cart block to a page and make sure you have at least two shipping options added and the shipping calculator enabled
  2. Add products to the cart and go to the Cart block
  3. Quickly click through all the shipping options multiple times
  4. Expect the total to change only after the final selection is made.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

This frontend change will result in server resource savings due to the decreased number of API calls to change the shipping method on the cart.

Changelog

Fixed a bug where quickly clicking through shipping methods would cause UI to update multiple times after the final selection is made.

@wavvves wavvves added type: bug The issue/PR concerns a confirmed bug. block: cart Issues related to the cart block. labels Feb 21, 2023
@wavvves wavvves self-assigned this Feb 21, 2023
@wavvves wavvves marked this pull request as ready for review February 21, 2023 17:22
@woocommercebot woocommercebot requested review from a team and senadir and removed request for a team February 21, 2023 17:23
@wavvves wavvves added this to the 9.7.0 milestone Feb 21, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Feb 21, 2023 •
edited
Loading

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8498.zip

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
wc-blocks.js wp-blocks, wp-compose, wp-element, wp-hooks, wp-i18n, wp-polyfill, wp-primitives ⚠️
active-filters.js lodash, react, wc-blocks-data-store, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
all-products.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
all-reviews.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives ⚠️
attribute-filter.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
breadcrumbs.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
cart.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-deprecated, wp-dom, wp-editor, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
catalog-sorting.js wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
checkout.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-deprecated, wp-dom, wp-editor, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
customer-account.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
featured-category.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
featured-product.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
filter-wrapper.js wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
handpicked-products.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
legacy-template.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
mini-cart.js react, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-dom, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
mini-cart-contents.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
store-notices.js wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
price-filter.js lodash, react, wc-blocks-data-store, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
product-best-sellers.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-category.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-categories.js wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render ⚠️
product-new.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-on-sale.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-query.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-hooks, wp-i18n, wp-polyfill, wp-primitives, wp-url ⚠️
product-results-count.js wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
product-search.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
product-tag.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-top-rated.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
products-by-attribute.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
rating-filter.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
reviews-by-category.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
reviews-by-product.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
single-product.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
stock-filter.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 493
  • Total errors: 2341

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Feb 21, 2023 •
edited
Loading

Size Change: +108 B (0%)

Total Size: 1.11 MB

Filename Size Change
build/all-products-frontend.js 11.7 kB +2 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 14.8 kB +19 B (0%)
build/cart-frontend.js 28.9 kB -1 B (0%)
build/cart.js 47.5 kB +17 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 14.9 kB +18 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.58 kB +23 B (+1%)
build/checkout-frontend.js 30.5 kB -1 B (0%)
build/checkout.js 44.2 kB +31 B (0%)
build/filter-wrapper-frontend.js 14.1 kB -4 B (0%)
build/mini-cart-component-frontend.js 28 kB +1 B (0%)
build/single-product-frontend.js 17.9 kB +3 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.98 kB
build/active-filters-wrapper-frontend.js 5.99 kB
build/active-filters.js 7.33 kB
build/all-products.js 36.5 kB
build/all-reviews.js 7.66 kB
build/attribute-filter-frontend.js 22.4 kB
build/attribute-filter-wrapper-frontend.js 7.08 kB
build/attribute-filter.js 12.4 kB
build/blocks-checkout.js 41.2 kB
build/breadcrumbs.js 2.05 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products-frontend.js 9.71 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.19 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.35 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-totals-frontend.js 322 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 655 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-subtotal-frontend.js 275 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.24 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.92 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 275 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/payment-frontend.js 8.43 kB
build/checkout-blocks/pickup-options-frontend.js 2.8 kB
build/checkout-blocks/shipping-address-frontend.js 1.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.28 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 324 B
build/customer-account.js 3.08 kB
build/featured-category.js 13.5 kB
build/featured-product.js 13.7 kB
build/filter-wrapper.js 2.39 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 7.24 kB
build/legacy-template.js 5.28 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 2.86 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 589 B
build/mini-cart-contents-block/shopping-button-frontend.js 313 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 17.1 kB
build/mini-cart-frontend.js 2 kB
build/mini-cart.js 4.3 kB
build/price-filter-frontend.js 13.8 kB
build/price-filter-wrapper-frontend.js 6.99 kB
build/price-filter.js 8.39 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 253 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.71 kB
build/product-add-to-cart.js 8.61 kB
build/product-best-sellers.js 7.6 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js 262 B
build/product-button-frontend.js 2.22 kB
build/product-button.js 3.99 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 1.19 kB
build/product-category-list.js 502 B
build/product-category.js 8.58 kB
build/product-image-frontend.js 2.23 kB
build/product-image.js 4.09 kB
build/product-new.js 7.58 kB
build/product-on-sale.js 7.91 kB
build/product-price-frontend.js 2.32 kB
build/product-price.js 1.58 kB
build/product-query.js 6.6 kB
build/product-rating-frontend.js 1.65 kB
build/product-rating.js 920 B
build/product-results-count.js 1.65 kB
build/product-sale-badge-frontend.js 1.45 kB
build/product-sale-badge.js 816 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 629 B
build/product-sku.js 378 B
build/product-stock-indicator-frontend.js 1.31 kB
build/product-stock-indicator.js 645 B
build/product-summary-frontend.js 1.58 kB
build/product-summary.js 920 B
build/product-tag-list-frontend.js 1.18 kB
build/product-tag-list.js 497 B
build/product-tag.js 8.07 kB
build/product-title-frontend.js 1.65 kB
build/product-title.js 3.46 kB
build/product-top-rated.js 7.82 kB
build/products-by-attribute.js 8.52 kB
build/rating-filter-frontend.js 20.9 kB
build/rating-filter-wrapper-frontend.js 5.61 kB
build/rating-filter.js 7.42 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7.14 kB
build/single-product.js 9.94 kB
build/stock-filter-frontend.js 21.1 kB
build/stock-filter-wrapper-frontend.js 5.85 kB
build/stock-filter.js 8.14 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.69 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.83 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/vendors--checkout-blocks/shipping-methods-frontend.js 8.84 kB
build/wc-blocks-data.js 21.5 kB
build/wc-blocks-editor-style-rtl.css 5.74 kB
build/wc-blocks-editor-style.css 5.75 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.73 kB
build/wc-blocks-style-rtl.css 26.7 kB
build/wc-blocks-style.css 26.7 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 64.4 kB
build/wc-blocks.js 2.63 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.6 kB
build/wc-shipping-method-pickup-location.js 29.7 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@wavvves wavvves removed this from the 9.7.0 milestone Feb 24, 2023
@wavvves wavvves requested review from nielslange and removed request for senadir February 27, 2023 10:14
@wavvves
Merge branch 'trunk' into add/8423_debounce_shipping_calculation_sele…
0c70848 
…ction

# Conflicts:
#	assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx
nielslange
nielslange approved these changes Mar 1, 2023
View reviewed changes
Copy link
Member

@nielslange nielslange left a comment

Choose a reason for hiding this comment

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

Thanks for working on this, @wavvves! The change works as expected. 🙌

@wavvves
Copy link
Contributor Author

wavvves commented Mar 1, 2023

Thanks for working on this, @wavvves! The change works as expected. 🙌

Thanks @nielslange , trunk is broken right now, I'm just waiting for a fix to merge this in ;)

@wavvves wavvves merged commit e66a26f into trunk Mar 1, 2023
@wavvves wavvves deleted the add/8423_debounce_shipping_calculation_selection branch March 1, 2023 13:41
@wavvves wavvves added this to the 9.8.0 milestone Mar 1, 2023
@Aljullu Aljullu mentioned this pull request Mar 14, 2023
Merged
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@nielslange nielslange nielslange approved these changes

Assignees

@wavvves wavvves

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

Successfully merging this pull request may close these issues.

Shipping calculator selection needs to be debounced
2 participants
@wavvves @nielslange