Checkout: Update loading placeholder (#46124)

* Checkout: Update loading placeholder * Finish up styles * Adjust styling * Fix naming convention Co-authored-by: fditrapani <[email protected]>
Automattic · Oct 5, 2020 · a3d7be6 · a3d7be6
1 parent 22f549c
commit a3d7be6
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 21 deletions.
diff --git a/client/my-sites/checkout/composite-checkout/components/wp-checkout.js b/client/my-sites/checkout/composite-checkout/components/wp-checkout.js
@@ -503,6 +503,7 @@ const CheckoutSummaryBody = styled.div`
 		display: block;
 		max-width: 328px;
 		position: fixed;
+		width: 100%;
 	}
 `;
 

diff --git a/packages/composite-checkout/src/components/loading-content.tsx b/packages/composite-checkout/src/components/loading-content.tsx
@@ -15,41 +15,71 @@ export default function LoadingContent() {
 
 	return (
 		<LoadingContentWrapperUI>
-			<LoadingCard>
-				<LoadingTitle>{ __( 'Loading checkout' ) }</LoadingTitle>
-				<LoadingCopy />
-				<LoadingCopy />
-			</LoadingCard>
-			<LoadingCard>
-				<LoadingTitle />
-				<LoadingCopy />
-				<LoadingCopy />
-			</LoadingCard>
-			<LoadingCard>
-				<LoadingTitle />
-			</LoadingCard>
-			<LoadingCard>
-				<LoadingTitle />
-			</LoadingCard>
-			<LoadingFooter />
+			<LoadingContentUI>
+				<LoadingCard>
+					<LoadingTitle>{ __( 'Loading checkout' ) }</LoadingTitle>
+					<LoadingCopy />
+					<LoadingCopy />
+				</LoadingCard>
+				<LoadingCard>
+					<LoadingTitle />
+					<LoadingCopy />
+					<LoadingCopy />
+				</LoadingCard>
+				<LoadingCard>
+					<LoadingTitle />
+				</LoadingCard>
+				<LoadingCard>
+					<LoadingTitle />
+				</LoadingCard>
+				<LoadingFooter />
+			</LoadingContentUI>
+
+			<LoadingSideBarUI>
+				<SideBarLoadingCopy />
+				<SideBarLoadingCopy />
+				<SideBarLoadingCopy />
+			</LoadingSideBarUI>
 		</LoadingContentWrapperUI>
 	);
 }
 
 const LoadingContentWrapperUI = styled.div`
+	display: flex;
+
+	@media ( ${ ( props ) => props.theme.breakpoints.tabletUp } ) {
+		align-items: flex-start;
+		flex-direction: row;
+		justify-content: center;
+		width: 100%;
+	}
+`;
+
+const LoadingContentUI = styled.div`
 	background: ${ ( props ) => props.theme.colors.surface };
 	width: 100%;
-	box-sizing: border-box;
-	margin-bottom: 0;
 
 	@media ( ${ ( props ) => props.theme.breakpoints.tabletUp } ) {
 		border: 1px solid ${ ( props ) => props.theme.colors.borderColorLight };
-		margin: 32px auto;
-		box-sizing: border-box;
 		max-width: 556px;
 	}
 `;
 
+const LoadingSideBarUI = styled.div`
+	display: none;
+	width: 100%;
+
+	@media ( ${ ( props ) => props.theme.breakpoints.tabletUp } ) {
+		display: block;
+		padding: 24px;
+		box-sizing: border-box;
+		border: 1px solid ${ ( props ) => props.theme.colors.borderColorLight };
+		max-width: 328px;
+		background: ${ ( props ) => props.theme.colors.surface };
+		margin-left: 24px;
+	}
+`;
+
 const LoadingCard = styled.div`
 	padding: 24px;
 	border-top: 1px solid ${ ( props ) => props.theme.colors.borderColorLight };
@@ -122,6 +152,17 @@ const LoadingCopy = styled.p`
 	}
 `;
 
+const SideBarLoadingCopy = styled.p`
+	font-size: 14px;
+	height: 16px;
+	content: '';
+	background: ${ ( props ) => props.theme.colors.borderColorLight };
+	color: ${ ( props ) => props.theme.colors.borderColorLight };
+	margin: 8px 0 0 0;
+	padding: 0;
+	animation: ${ pulse } 2s ease-in-out infinite;
+`;
+
 const LoadingFooter = styled.div`
 	background: ${ ( props ) => props.theme.colors.background };
 	content: '';