Skip to content

Commit 1e292be

Browse files
uxfix: added tip description while loading
1 parent 8b613d0 commit 1e292be

File tree

1 file changed

+50
-5
lines changed

1 file changed

+50
-5
lines changed

editor/scaffolds/editor/skeleton.tsx

Lines changed: 50 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,11 @@ export function EditorSkeleton({ percent = 0 }: { percent?: number }) {
99
return (
1010
<SkeletonWrap>
1111
<LoadingIndicatorContainer>
12-
<HomeLogo />
13-
<ColoredLinearProgress />
12+
<LogoAndLoading>
13+
<HomeLogo />
14+
<ColoredLinearProgress />
15+
</LogoAndLoading>
16+
<TipsContainer />
1417
</LoadingIndicatorContainer>
1518
</SkeletonWrap>
1619
);
@@ -26,22 +29,34 @@ const SkeletonWrap = styled.div`
2629

2730
const LoadingIndicatorContainer = styled.div`
2831
z-index: 100;
32+
user-select: none;
2933
display: flex;
3034
justify-content: flex-start;
3135
flex-direction: column;
3236
align-items: center;
33-
gap: 40px;
37+
gap: 20px;
3438
box-sizing: border-box;
3539
position: absolute;
3640
margin: auto;
3741
/* pos */
3842
position: absolute;
3943
top: 50%;
4044
left: 50%;
41-
margin-top: -44px;
45+
margin-top: -80px;
4246
margin-left: -110px;
4347
width: 220px;
44-
height: 88px;
48+
`;
49+
50+
const LogoAndLoading = styled.div`
51+
display: flex;
52+
justify-content: flex-start;
53+
flex-direction: column;
54+
align-items: center;
55+
flex: 1;
56+
gap: 40px;
57+
width: 100%;
58+
align-self: stretch;
59+
box-sizing: border-box;
4560
`;
4661

4762
const styles = (props) => ({
@@ -68,3 +83,33 @@ const ColoredLinearProgress = withStyles(styles)(function (props) {
6883
</Box>
6984
);
7085
});
86+
87+
export function TipsContainer() {
88+
return (
89+
<RootWrapperTipsContainer>
90+
<Tip>First Loading might take a while depending on your file size.</Tip>
91+
</RootWrapperTipsContainer>
92+
);
93+
}
94+
95+
const RootWrapperTipsContainer = styled.div`
96+
display: flex;
97+
justify-content: center;
98+
flex-direction: row;
99+
align-items: center;
100+
flex: 1;
101+
gap: 10px;
102+
align-self: stretch;
103+
box-sizing: border-box;
104+
padding: 0px 8px;
105+
`;
106+
107+
const Tip = styled.span`
108+
color: rgba(255, 255, 255, 0.33);
109+
text-overflow: ellipsis;
110+
font-size: 14px;
111+
font-family: Roboto, sans-serif;
112+
font-weight: 400;
113+
text-align: center;
114+
width: 205px;
115+
`;

0 commit comments

Comments
 (0)