Add a loading state to Cart i2

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

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

@@ -54,3 +54,73 @@
 		padding: $gap 0 0;
 	}
 }
+
+.wp-block-woocommerce-cart-i2.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-i2.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%;
+		}
+	}
+}