Add a loading state to Cart i2 (#4980)

* 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

assets/js/blocks/cart-checkout/cart/style.scss

@@ -29,7 +29,7 @@ table.wc-block-cart-items {
 	width: 100%;
 
 	.wc-block-cart-items__header {
-		@include font-size(smaller);
+		@include font-size( smaller );
 		text-transform: uppercase;
 
 		.wc-block-cart-items__header-image {
@@ -51,7 +51,7 @@ table.wc-block-cart-items {
 		.wc-block-cart-item__quantity {
 			.wc-block-cart-item__remove-link {
 				@include link-button;
-				@include font-size(smaller);
+				@include font-size( smaller );
 
 				text-transform: none;
 				white-space: nowrap;
@@ -62,7 +62,7 @@ table.wc-block-cart-items {
 			max-width: max-content;
 		}
 		.wc-block-cart-item__total {
-			@include font-size(regular);
+			@include font-size( regular );
 			text-align: right;
 			line-height: inherit;
 		}
@@ -179,7 +179,7 @@ table.wc-block-cart-items {
 			display: none;
 		}
 		.wc-block-cart-items__row {
-			@include with-translucent-border(0 0 1px);
+			@include with-translucent-border( 0 0 1px );
 			display: grid;
 			grid-template-columns: 80px 132px;
 			padding: $gap 0;
@@ -219,14 +219,14 @@ table.wc-block-cart-items {
 	margin-bottom: 3em;
 
 	.wc-block-cart-items {
-		@include with-translucent-border(0 0 1px);
+		@include with-translucent-border( 0 0 1px );
 
 		th {
 			padding: 0.25rem $gap 0.25rem 0;
 			white-space: nowrap;
 		}
 		td {
-			@include with-translucent-border(1px 0 0);
+			@include with-translucent-border( 1px 0 0 );
 			padding: $gap 0 $gap $gap;
 			vertical-align: top;
 		}
@@ -251,7 +251,7 @@ table.wc-block-cart-items {
 
 	.wc-block-cart__totals-title {
 		@include text-heading();
-		@include font-size(smaller);
+		@include font-size( smaller );
 		display: block;
 		font-weight: 600;
 		padding: 0.25rem 0;
@@ -271,3 +271,73 @@ table.wc-block-cart-items {
 		padding: $gap 0 0;
 	}
 }
+
+.wp-block-woocommerce-cart.is-loading {
+	.wp-block-woocommerce-empty-cart-block {
+		display: none;
+	}
+	.wp-block-woocommerce-filled-cart-block {
+		display: flex;
+		flex-wrap: wrap;
+		margin: 0 auto $gap;
+		position: relative;
+	}
+
+	.wp-block-woocommerce-cart-items-block {
+		box-sizing: border-box;
+		margin: 0;
+		padding-right: percentage(math.div($gap-largest, 1060px)); // ~1060px is the default width of the content area in Storefront.
+		width: 65%;
+		min-height: 10em;
+	}
+
+	.wp-block-woocommerce-cart-line-items-block {
+		min-height: 15em;
+		display: block;
+		@include placeholder();
+	}
+
+	.wp-block-woocommerce-cart-totals-block {
+		box-sizing: border-box;
+		margin: 0;
+		padding-left: percentage(math.div($gap-large, 1060px));
+		width: 35%;
+		min-height: 12em;
+	}
+
+	.wp-block-woocommerce-cart-order-summary-block,
+	.wp-block-woocommerce-cart-express-payment-block,
+	.wp-block-woocommerce-proceed-to-checkout-block,
+	.wp-block-woocommerce-cart-accepted-payment-methods-block {
+		min-height: 3em;
+		display: block;
+		@include placeholder();
+		margin: 0 0 1em 0;
+	}
+
+	.wp-block-woocommerce-cart-order-summary-block {
+		height: 20em;
+	}
+}
+
+// Skeleton is shown before mobile classes are appended.
+@media only screen and ( max-width: 700px ) {
+	.wp-block-woocommerce-cart.is-loading {
+		padding-top: $gap;
+
+		.wp-block-woocommerce-filled-cart-block {
+			flex-direction: column;
+			margin: 0 auto $gap;
+		}
+
+		.wp-block-woocommerce-cart-items-block {
+			padding: 0;
+			width: 100%;
+		}
+
+		.wp-block-woocommerce-cart-totals-block {
+			padding: 0;
+			width: 100%;
+		}
+	}
+}