|
1 | 1 | import React from "react"; |
2 | 2 | import styled from "@emotion/styled"; |
3 | 3 | import { HomeLogo } from "icons/home-logo"; |
4 | | -import { AnimatedLineProgressBar } from "@frogress/line"; |
5 | | -import { colors } from "theme"; |
| 4 | +import { withStyles } from "@material-ui/core/styles"; |
| 5 | +import Box from "@material-ui/core/Box"; |
| 6 | +import LinearProgress from "@material-ui/core/LinearProgress"; |
6 | 7 |
|
7 | 8 | export function EditorSkeleton({ percent = 0 }: { percent?: number }) { |
8 | 9 | return ( |
9 | 10 | <SkeletonWrap> |
10 | 11 | <LoadingIndicatorContainer> |
11 | 12 | <HomeLogo /> |
12 | | - <AnimatedLineProgressBar |
13 | | - containerColor="#838383" |
14 | | - progressColor="#fff" |
15 | | - defaultValue={0} |
16 | | - percent={percent * 100} |
17 | | - /> |
| 13 | + <ColoredLinearProgress /> |
18 | 14 | </LoadingIndicatorContainer> |
19 | | - {/* <Body> |
20 | | - <SidebarMock> |
21 | | - <ListMock> |
22 | | - {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => ( |
23 | | - <MockItem1 key={i.toString()}> |
24 | | - <BaseHierarchyItem> |
25 | | - <Frame55> |
26 | | - <Frame52></Frame52> |
27 | | - <Frame324></Frame324> |
28 | | - </Frame55> |
29 | | - </BaseHierarchyItem> |
30 | | - </MockItem1> |
31 | | - ))} |
32 | | - </ListMock> |
33 | | - </SidebarMock> |
34 | | - <CanvasMock></CanvasMock> |
35 | | - <CodeEditorMock></CodeEditorMock> |
36 | | - </Body> */} |
37 | 15 | </SkeletonWrap> |
38 | 16 | ); |
39 | 17 | } |
@@ -65,3 +43,28 @@ const LoadingIndicatorContainer = styled.div` |
65 | 43 | width: 220px; |
66 | 44 | height: 88px; |
67 | 45 | `; |
| 46 | + |
| 47 | +const styles = (props) => ({ |
| 48 | + colorPrimary: { |
| 49 | + backgroundColor: "rgba(255, 255, 255, 0.3)", |
| 50 | + }, |
| 51 | + barColorPrimary: { |
| 52 | + backgroundColor: "#fff", |
| 53 | + }, |
| 54 | +}); |
| 55 | + |
| 56 | +const ColoredLinearProgress = withStyles(styles)(function (props) { |
| 57 | + //@ts-ignore |
| 58 | + const { classes } = props; |
| 59 | + return ( |
| 60 | + <Box sx={{ width: "100%" }}> |
| 61 | + <LinearProgress |
| 62 | + {...props} |
| 63 | + classes={{ |
| 64 | + colorPrimary: classes.colorPrimary, |
| 65 | + barColorPrimary: classes.barColorPrimary, |
| 66 | + }} |
| 67 | + /> |
| 68 | + </Box> |
| 69 | + ); |
| 70 | +}); |
0 commit comments