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

Add skeleton loading element to cart page page BNPL messaging #8607

Merged
merged 3 commits into from
Apr 11, 2024

Conversation

mdmoore
Copy link
Member

@mdmoore mdmoore commented Apr 9, 2024

Fixes #8606

Changes proposed in this Pull Request

This affects only shortcode cart. When the cart totals update, the BNPL Payment Method Messaging Element is removed by the core update of that section. This requires that it is remounted after the updated HTML is inserted to that section. The skeleton component bridges the loading gap between that insert and the remount of the PMME.

For context and demo, see: #8144 (comment)

Testing instructions

  • Enable BNPL payment methods
  • Add a product to the cart and visit the shortcode cart
  • Verify that the PMME is present
  • Update the cart quantity and verify that the skeleton element appears while the PMME is remounting

  • Run npm run changelog to add a changelog file, choose patch to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.
  • Covered with tests (or have a good reason not to test in description ☝️)
  • Tested on mobile (or does not apply)

Post merge

@botwoo
Copy link
Collaborator

botwoo commented Apr 9, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 8607 or branch name cart/pmme-total-updates in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

Option 2. Jurassic Ninja - available for logged-in A12s

🚀 Launch a JN site with this branch 🚀

ℹ️ Install this Tampermonkey script to get more options.


Build info:

  • Latest commit: 23bcf55
  • Build time: 2024-04-10 15:51:46 UTC

Note: the build is updated when a new commit is pushed to this PR.

@mdmoore mdmoore requested review from a team and timur27 and removed request for a team April 9, 2024 17:36
Copy link
Contributor

github-actions bot commented Apr 9, 2024

Size Change: +1.41 kB (0%)

Total Size: 1.22 MB

Filename Size Change
release/woocommerce-payments/dist/blocks-checkout.js 56.3 kB -17 B (0%)
release/woocommerce-payments/dist/checkout.js 37.1 kB -17 B (0%)
release/woocommerce-payments/dist/index-rtl.css 40.4 kB +232 B (+1%)
release/woocommerce-payments/dist/index.css 40.4 kB +233 B (+1%)
release/woocommerce-payments/dist/index.js 291 kB +410 B (0%)
release/woocommerce-payments/dist/product-details-rtl.css 398 B +162 B (+69%) 🆘
release/woocommerce-payments/dist/product-details.css 402 B +166 B (+70%) 🆘
release/woocommerce-payments/dist/product-details.js 17.1 kB +238 B (+1%)
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.08 kB
release/woocommerce-payments/assets/css/admin.rtl.css 1.08 kB
release/woocommerce-payments/assets/css/success.css 158 B
release/woocommerce-payments/assets/css/success.rtl.css 158 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 1.92 kB
release/woocommerce-payments/dist/blocks-checkout.css 1.91 kB
release/woocommerce-payments/dist/cart-block.js 21.3 kB
release/woocommerce-payments/dist/cart.js 4.42 kB
release/woocommerce-payments/dist/checkout-rtl.css 405 B
release/woocommerce-payments/dist/checkout.css 405 B
release/woocommerce-payments/dist/multi-currency-analytics.js 1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 3.28 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 59.4 kB
release/woocommerce-payments/dist/multi-currency.css 3.29 kB
release/woocommerce-payments/dist/multi-currency.js 54.5 kB
release/woocommerce-payments/dist/order-rtl.css 733 B
release/woocommerce-payments/dist/order.css 735 B
release/woocommerce-payments/dist/order.js 41.7 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css 1.21 kB
release/woocommerce-payments/dist/payment-gateways.css 1.21 kB
release/woocommerce-payments/dist/payment-gateways.js 38.5 kB
release/woocommerce-payments/dist/payment-request-rtl.css 155 B
release/woocommerce-payments/dist/payment-request.css 155 B
release/woocommerce-payments/dist/payment-request.js 12.3 kB
release/woocommerce-payments/dist/settings-rtl.css 11 kB
release/woocommerce-payments/dist/settings.css 10.8 kB
release/woocommerce-payments/dist/settings.js 201 kB
release/woocommerce-payments/dist/subscription-edit-page.js 669 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 527 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 527 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 19.4 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 710 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.js 18.5 kB
release/woocommerce-payments/dist/tos-rtl.css 235 B
release/woocommerce-payments/dist/tos.css 236 B
release/woocommerce-payments/dist/tos.js 21 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js 4.58 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css 155 B
release/woocommerce-payments/dist/woopay-express-button.css 155 B
release/woocommerce-payments/dist/woopay-express-button.js 20.9 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.44 kB
release/woocommerce-payments/dist/woopay.css 4.41 kB
release/woocommerce-payments/dist/woopay.js 70.9 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 622 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 815 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.44 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js 1.01 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js 522 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js 581 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js 160 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css 2.37 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js 13.5 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css 2.37 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css 1.03 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css 291 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css 403 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css 3.6 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css 299 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css 742 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css 572 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css 411 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js 544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js 9.4 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js 6.8 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js 3.83 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js 544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js 2.52 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js 22.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js 11.6 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/payment-method-restrictions.js 1.29 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/wcs-meta-boxes-order.js 502 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js 355 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js 429 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/view-subscription.js 1.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/wcs-cart.js 781 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js 1.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js 1.27 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css 392 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js 3.05 kB

compressed-size-action

Copy link
Contributor

@timur27 timur27 left a comment

Choose a reason for hiding this comment

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

Great job @mdmoore 🎉 I just left one comment where I'd like us to try to reproduce the misaligned CSS which happened a few times for me. I'm happy to approve right after we quickly align on this, because I don't have any more threads to discuss.

client/product-details/bnpl-site-messaging/index.js Outdated Show resolved Hide resolved
client/product-details/bnpl-site-messaging/index.js Outdated Show resolved Hide resolved
@mdmoore mdmoore requested a review from timur27 April 10, 2024 15:55
Copy link
Contributor

@timur27 timur27 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 the quick alignment and your work here, Mike! 🚀 🚢

@mdmoore mdmoore added this pull request to the merge queue Apr 11, 2024
Merged via the queue into develop with commit 50a61bb Apr 11, 2024
24 checks passed
@mdmoore mdmoore deleted the cart/pmme-total-updates branch April 11, 2024 15:05
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.

Add skeleton to cart BNPL messaging
3 participants