@@ -9,8 +9,11 @@ export function EditorSkeleton({ percent = 0 }: { percent?: number }) {
9
9
return (
10
10
< SkeletonWrap >
11
11
< LoadingIndicatorContainer >
12
- < HomeLogo />
13
- < ColoredLinearProgress />
12
+ < LogoAndLoading >
13
+ < HomeLogo />
14
+ < ColoredLinearProgress />
15
+ </ LogoAndLoading >
16
+ < TipsContainer />
14
17
</ LoadingIndicatorContainer >
15
18
</ SkeletonWrap >
16
19
) ;
@@ -26,22 +29,34 @@ const SkeletonWrap = styled.div`
26
29
27
30
const LoadingIndicatorContainer = styled . div `
28
31
z-index: 100;
32
+ user-select: none;
29
33
display: flex;
30
34
justify-content: flex-start;
31
35
flex-direction: column;
32
36
align-items: center;
33
- gap: 40px ;
37
+ gap: 20px ;
34
38
box-sizing: border-box;
35
39
position: absolute;
36
40
margin: auto;
37
41
/* pos */
38
42
position: absolute;
39
43
top: 50%;
40
44
left: 50%;
41
- margin-top: -44px ;
45
+ margin-top: -80px ;
42
46
margin-left: -110px;
43
47
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;
45
60
` ;
46
61
47
62
const styles = ( props ) => ( {
@@ -68,3 +83,33 @@ const ColoredLinearProgress = withStyles(styles)(function (props) {
68
83
</ Box >
69
84
) ;
70
85
} ) ;
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