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

Add a loading state to Cart i2 #4980

Merged
merged 2 commits into from
Oct 25, 2021
Merged

Add a loading state to Cart i2 #4980

merged 2 commits into from
Oct 25, 2021

Conversation

ralucaStan
Copy link
Contributor

@ralucaStan ralucaStan commented Oct 21, 2021

We use CSS and the is-loading class to hide the empty state and show a loading state for the filled state.

Fixes #4964

How to test the changes in this Pull Request:

  1. Add Cart i2 to a page
  2. In the front-end, notice the place holder that appears until the block loads
  3. Switch to a mobile viewport
  4. Notice how the placeholder has a mobile layout

@ralucaStan ralucaStan added the block: cart Issues related to the cart block. label Oct 21, 2021
@rubikuserbot rubikuserbot requested review from a team and mikejolley and removed request for a team October 21, 2021 09:49
@ralucaStan ralucaStan added the skip-changelog PRs that you don't want to appear in the changelog. label Oct 21, 2021
@github-actions
Copy link
Contributor

github-actions bot commented Oct 21, 2021

Size Change: +392 B (0%)

Total Size: 1.1 MB

Filename Size Change
build/wc-blocks-style-rtl.css 20.6 kB +195 B (+1%)
build/wc-blocks-style.css 20.6 kB +197 B (+1%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.33 kB
build/active-filters.js 8 kB
build/all-products-frontend.js 22.8 kB
build/all-products.js 37.4 kB
build/all-reviews.js 9.57 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.69 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.81 kB
build/atomic-block-components/add-to-cart--atomic-block-components/image--atomic-block-components/title.js 332 B
build/atomic-block-components/add-to-cart-frontend.js 8.51 kB
build/atomic-block-components/add-to-cart.js 7.84 kB
build/atomic-block-components/button-frontend.js 1.74 kB
build/atomic-block-components/button.js 874 B
build/atomic-block-components/category-list-frontend.js 464 B
build/atomic-block-components/category-list.js 471 B
build/atomic-block-components/image-frontend.js 1.88 kB
build/atomic-block-components/image.js 1.35 kB
build/atomic-block-components/price-frontend.js 2.14 kB
build/atomic-block-components/price.js 2.11 kB
build/atomic-block-components/rating-frontend.js 561 B
build/atomic-block-components/rating.js 567 B
build/atomic-block-components/sale-badge-frontend.js 859 B
build/atomic-block-components/sale-badge.js 868 B
build/atomic-block-components/sku-frontend.js 392 B
build/atomic-block-components/sku.js 391 B
build/atomic-block-components/stock-indicator-frontend.js 611 B
build/atomic-block-components/stock-indicator.js 610 B
build/atomic-block-components/summary-frontend.js 908 B
build/atomic-block-components/summary.js 911 B
build/atomic-block-components/tag-list-frontend.js 466 B
build/atomic-block-components/tag-list.js 471 B
build/atomic-block-components/title-frontend.js 1.55 kB
build/atomic-block-components/title.js 1.38 kB
build/attribute-filter-frontend.js 18.3 kB
build/attribute-filter.js 12.1 kB
build/blocks-checkout.js 21.1 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/checkout-button-frontend.js 1.21 kB
build/cart-blocks/empty-cart-frontend.js 341 B
build/cart-blocks/express-payment--checkout-blocks/express-payment--checkout-blocks/payment-frontend.js 4.71 kB
build/cart-blocks/express-payment-frontend.js 1.57 kB
build/cart-blocks/filled-cart-frontend.js 802 B
build/cart-blocks/items-frontend.js 300 B
build/cart-blocks/line-items-frontend.js 5.79 kB
build/cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.69 kB
build/cart-blocks/order-summary-frontend.js 7.4 kB
build/cart-blocks/totals-frontend.js 312 B
build/cart-frontend.js 52.7 kB
build/cart.js 50.1 kB
build/checkout-blocks/actions-frontend.js 1.51 kB
build/checkout-blocks/billing-address-frontend.js 2.66 kB
build/checkout-blocks/contact-information-frontend.js 3.9 kB
build/checkout-blocks/express-payment-frontend.js 1.93 kB
build/checkout-blocks/fields-frontend.js 347 B
build/checkout-blocks/order-note-frontend.js 1.56 kB
build/checkout-blocks/order-summary-frontend.js 12.8 kB
build/checkout-blocks/payment-frontend.js 4.58 kB
build/checkout-blocks/shipping-address-frontend.js 3.06 kB
build/checkout-blocks/shipping-methods-frontend.js 5.56 kB
build/checkout-blocks/terms-frontend.js 1.65 kB
build/checkout-blocks/totals-frontend.js 330 B
build/checkout-frontend.js 54.6 kB
build/checkout.js 53.4 kB
build/featured-category.js 7.74 kB
build/featured-product.js 9.43 kB
build/handpicked-products.js 6.27 kB
build/mini-cart-component-frontend.js 36.8 kB
build/mini-cart-frontend.js 2.28 kB
build/mini-cart.js 5.29 kB
build/price-filter-frontend.js 14.4 kB
build/price-filter.js 9.65 kB
build/price-format.js 1.37 kB
build/product-best-sellers.js 6.63 kB
build/product-categories.js 3.37 kB
build/product-category.js 7.5 kB
build/product-new.js 6.79 kB
build/product-on-sale.js 7.13 kB
build/product-search.js 2.68 kB
build/product-tag.js 6.59 kB
build/product-top-rated.js 6.75 kB
build/products-by-attribute.js 7.71 kB
build/reviews-by-category.js 11.5 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 8.96 kB
build/single-product-frontend.js 26.1 kB
build/single-product.js 9.77 kB
build/stock-filter-frontend.js 8.76 kB
build/stock-filter.js 7.81 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 16.1 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 4.78 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js 5.71 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js 3.1 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 5.02 kB
build/wc-blocks-data.js 11.3 kB
build/wc-blocks-editor-style-rtl.css 15.6 kB
build/wc-blocks-editor-style.css 15.6 kB
build/wc-blocks-google-analytics.js 1.98 kB
build/wc-blocks-middleware.js 1.47 kB
build/wc-blocks-registry.js 3.71 kB
build/wc-blocks-shared-context.js 1.54 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-vendors-style-rtl.css 1.37 kB
build/wc-blocks-vendors-style.css 1.37 kB
build/wc-blocks-vendors.js 254 kB
build/wc-blocks.js 3.49 kB
build/wc-payment-method-bacs.js 806 B
build/wc-payment-method-cheque.js 806 B
build/wc-payment-method-cod.js 898 B
build/wc-payment-method-paypal.js 839 B
build/wc-payment-method-stripe.js 12.2 kB
build/wc-settings.js 2.91 kB

compressed-size-action

Copy link
Member

@mikejolley mikejolley left a comment

Choose a reason for hiding this comment

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

Tested and looks good 👍🏻

Since this is smaller than scope from the i1-i2 migration, I'd suggest holding off merging and rebasing once thats merged to trunk.

@github-actions github-actions bot added this to the 6.2.0 milestone Oct 21, 2021
@ralucaStan
Copy link
Contributor Author

@mike agree on the merge part

@ralucaStan ralucaStan added the status: blocked The issue is blocked from progressing, waiting for another piece of work to be done. label Oct 21, 2021
We use CSS and the is-loading class to hide empty state and show regular state
@ralucaStan ralucaStan force-pushed the update/cart-i2-loading-state branch from 91a1e0c to 63cd8fa Compare October 25, 2021 15:03
@senadir senadir merged commit a3bc7a0 into trunk Oct 25, 2021
@senadir senadir deleted the update/cart-i2-loading-state branch October 25, 2021 15:31
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 14, 2021
* Add a loading state to Cart i2

We use CSS and the is-loading class to hide empty state and show regular state

* Lint cart/style.scss
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 16, 2021
* Add a loading state to Cart i2

We use CSS and the is-loading class to hide empty state and show regular state

* Lint cart/style.scss
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: cart Issues related to the cart block. skip-changelog PRs that you don't want to appear in the changelog. status: blocked The issue is blocked from progressing, waiting for another piece of work to be done.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Cart i2: block has no skeleton and the Empty cart is showed until the block loads
3 participants