Skip to content

Commit ed0afdc

Browse files
StevenDufresneStevenDufresne
committed
Update the skeleton.
1 parent 5129210 commit ed0afdc

File tree

2 files changed

+81
-58
lines changed

2 files changed

+81
-58
lines changed

‎client/my-sites/checkout/src/components/checkout-main-content.tsx

+34-20
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,10 @@ import JetpackAkismetCheckoutSidebarPlanUpsell from './jetpack-akismet-checkout-
8888
import BeforeSubmitCheckoutHeader from './payment-method-step';
8989
import SecondaryCartPromotions from './secondary-cart-promotions';
9090
import WPCheckoutOrderReview, { CouponFieldArea } from './wp-checkout-order-review';
91-
import { WPCheckoutOrderSummary } from './wp-checkout-order-summary';
91+
import {
92+
LoadingCheckoutSummaryFeaturesList,
93+
WPCheckoutOrderSummary,
94+
} from './wp-checkout-order-summary';
9295
import WPContactForm from './wp-contact-form';
9396
import WPContactFormSummary from './wp-contact-form-summary';
9497
import type { OnChangeItemVariant } from './item-variation-picker';
@@ -115,38 +118,42 @@ const LoadingSidebar = styled.div`
115118
116119
@media ( ${ ( props ) => props.theme.breakpoints.desktopUp } ) {
117120
display: block;
118-
padding: 24px;
119121
box-sizing: border-box;
120-
border: 1px solid ${ ( props ) => props.theme.colors.borderColorLight };
121-
max-width: 328px;
122-
background: ${ ( props ) => props.theme.colors.surface };
122+
max-width: 288px;
123123
margin-top: 46px;
124124
}
125125
`;
126126

127127
const pulse = keyframes`
128-
0% {
129-
opacity: 1;
130-
}
128+
0% { opacity: 1; }
131129
132-
70% {
133-
opacity: 0.5;
134-
}
130+
70% { opacity: 0.25; }
135131
136-
100% {
137-
opacity: 1;
138-
}
132+
100% { opacity: 1; }
139133
`;
140134

141-
const SideBarLoadingCopy = styled.p`
135+
const LoadingFooter = styled.div`
136+
margin-top: 20px;
137+
padding-top: 20px;
138+
display: flex;
139+
justify-content: space-between;
140+
border-top: 1px solid ${ ( props ) => props.theme.colors.borderColorLight };
141+
`;
142+
143+
interface LoadingContainerProps {
144+
width?: string;
145+
height?: string;
146+
}
147+
148+
const SideBarLoadingCopy = styled.div< LoadingContainerProps >`
142149
font-size: 14px;
143-
height: 16px;
144150
content: '';
145151
background: ${ ( props ) => props.theme.colors.borderColorLight };
146152
color: ${ ( props ) => props.theme.colors.borderColorLight };
147-
margin: 8px 0 0 0;
148153
padding: 0;
149-
animation: ${ pulse } 2s ease-in-out infinite;
154+
animation: ${ pulse } 1.5s ease-in-out infinite;
155+
width: ${ ( props ) => props.width ?? 'inherit' };
156+
height: ${ ( props ) => props.height ?? '16px' };
150157
`;
151158

152159
const ContactDetailsFormDescription = styled.p`
@@ -174,8 +181,15 @@ function LoadingSidebarContent() {
174181
return (
175182
<LoadingSidebar>
176183
<SideBarLoadingCopy />
177-
<SideBarLoadingCopy />
178-
<SideBarLoadingCopy />
184+
<LoadingCheckoutSummaryFeaturesList />
185+
<LoadingFooter>
186+
<SideBarLoadingCopy width="50px" />
187+
<SideBarLoadingCopy width="75px" />
188+
</LoadingFooter>
189+
<LoadingFooter>
190+
<SideBarLoadingCopy height="30px" width="75px" />
191+
<SideBarLoadingCopy height="30px" width="125px" />
192+
</LoadingFooter>
179193
</LoadingSidebar>
180194
);
181195
}

‎packages/composite-checkout/src/components/loading-content.tsx

+47-38
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,11 @@ import { useI18n } from '@wordpress/react-i18n';
44

55
const LoadingContentWrapper = styled.div`
66
display: flex;
7-
padding-top: 50px;
7+
padding: 25px 24px 0;
8+
9+
@media ( ${ ( props ) => props.theme.breakpoints.tabletUp } ) {
10+
padding: 25px 0 0;
11+
}
812
913
@media ( ${ ( props ) => props.theme.breakpoints.desktopUp } ) {
1014
align-items: flex-start;
@@ -19,8 +23,6 @@ const LoadingContentInnerWrapper = styled.div`
1923
width: 100%;
2024
2125
@media ( ${ ( props ) => props.theme.breakpoints.tabletUp } ) {
22-
border: 1px solid ${ ( props ) => props.theme.colors.borderColorLight };
23-
max-width: 556px;
2426
margin: 0 auto;
2527
}
2628
@@ -30,8 +32,7 @@ const LoadingContentInnerWrapper = styled.div`
3032
`;
3133

3234
const LoadingCard = styled.div`
33-
padding: 24px;
34-
border-top: 1px solid ${ ( props ) => props.theme.colors.borderColorLight };
35+
padding: 24px 0;
3536
3637
:first-of-type {
3738
border-top: 0;
@@ -52,69 +53,66 @@ const pulse = keyframes`
5253
}
5354
`;
5455

55-
const LoadingTitle = styled.h1`
56+
interface LoadingContainerProps {
57+
width?: string;
58+
height?: string;
59+
}
60+
61+
const LoadingTitle = styled.h1< LoadingContainerProps >`
5662
font-size: 14px;
5763
content: '';
5864
font-weight: ${ ( props ) => props.theme.weights.normal };
5965
background: ${ ( props ) => props.theme.colors.borderColorLight };
6066
color: ${ ( props ) => props.theme.colors.borderColorLight };
61-
width: 40%;
62-
margin: 3px 0 0 35px;
67+
width: ${ ( props ) => props.width ?? '40%' };
68+
margin: 3px 0 0 40px;
6369
padding: 0;
6470
position: relative;
6571
animation: ${ pulse } 2s ease-in-out infinite;
6672
height: 20px;
73+
width: 125px;
6774
6875
.rtl & {
69-
margin: 3px 35px 0 0;
76+
margin: 3px 40px 0 0;
7077
}
7178
7279
::before {
7380
content: '';
7481
display: block;
7582
position: absolute;
76-
left: -35px;
83+
left: -40px;
7784
top: -3px;
7885
width: 27px;
7986
height: 27px;
8087
background: ${ ( props ) => props.theme.colors.borderColorLight };
8188
border-radius: 100%;
8289
8390
.rtl & {
84-
right: -35px;
91+
right: -40px;
8592
left: auto;
8693
}
8794
}
8895
`;
89-
const LoadingCopy = styled.p`
96+
97+
const LoadingRow = styled.div`
98+
display: flex;
99+
justify-content: space-between;
100+
`;
101+
102+
const LoadingCopy = styled.p< LoadingContainerProps >`
90103
font-size: 14px;
91-
height: 16px;
104+
height: ${ ( props ) => props.height ?? '16px' };
92105
content: '';
93106
background: ${ ( props ) => props.theme.colors.borderColorLight };
94107
color: ${ ( props ) => props.theme.colors.borderColorLight };
95-
margin: 8px 0 0 35px;
108+
margin: 8px 0 0 40px;
96109
padding: 0;
97110
animation: ${ pulse } 2s ease-in-out infinite;
111+
width: ${ ( props ) => props.width ?? 'inherit' };
112+
box-sizing: border-box;
98113
99114
.rtl & {
100-
margin: 8px 35px 0 0;
101-
}
102-
`;
103-
104-
const LoadingFooter = styled.div`
105-
background: ${ ( props ) => props.theme.colors.background };
106-
content: '';
107-
border-top: 1px solid ${ ( props ) => props.theme.colors.borderColorLight };
108-
padding: 24px;
109-
110-
::before {
111-
content: '';
112-
display: block;
113-
border: 1px solid ${ ( props ) => props.theme.colors.borderColorLight };
114-
border-radius: 3px;
115-
font-size: 14px;
116-
width: 100%;
117-
height: 40px;
115+
margin: 8px 40px 0 0;
118116
}
119117
`;
120118

@@ -126,21 +124,32 @@ export default function LoadingContent() {
126124
<LoadingContentInnerWrapper>
127125
<LoadingCard>
128126
<LoadingTitle>{ __( 'Loading checkout' ) }</LoadingTitle>
129-
<LoadingCopy />
130-
<LoadingCopy />
127+
<LoadingCopy width="225px" />
131128
</LoadingCard>
132129
<LoadingCard>
133-
<LoadingTitle />
134-
<LoadingCopy />
135-
<LoadingCopy />
130+
<LoadingRow>
131+
<LoadingCopy width="150px" />
132+
<LoadingCopy width="45px" />
133+
</LoadingRow>
134+
<LoadingCopy height="35px" width="225px" />
135+
<LoadingCopy width="100px" />
136+
</LoadingCard>
137+
<LoadingCard>
138+
<LoadingRow>
139+
<LoadingCopy width="150px" />
140+
<LoadingCopy width="45px" />
141+
</LoadingRow>
142+
<LoadingCopy height="35px" width="225px" />
143+
<LoadingCopy width="100px" />
136144
</LoadingCard>
137145
<LoadingCard>
138146
<LoadingTitle />
147+
<LoadingCopy width="300px" />
139148
</LoadingCard>
140149
<LoadingCard>
141150
<LoadingTitle />
151+
<LoadingCopy width="300px" />
142152
</LoadingCard>
143-
<LoadingFooter />
144153
</LoadingContentInnerWrapper>
145154
</LoadingContentWrapper>
146155
);

0 commit comments

Comments
 (0)