IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Common: create tree folder loader

Browse Source
This commit is contained in:
Viktor Fomin 2020-11-03 23:00:43 +03:00
parent 234b323633
commit a591a48e13
1 changed files with 48 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
web/ASC.Web.Common/src/components/Loaders/TreeFolderLoader.js
View File

@ -1,17 +1,52 @@
import React from "react";
import ContentLoader from "react-content-loader";
import styled from "styled-components";
import RectangleLoader from "./RectangleLoader";
import CircleLoader from "./CircleLoader";
const TreeFolderLoader = () => (
<ContentLoader
speed={2}
width={264}
height={188}
viewBox="0 0 264 188"
backgroundColor="#f3f3f3"
foregroundColor="#ecebeb"
>
<rect x="0" y="0" rx="0" ry="0" width="216" height="189" />
</ContentLoader>
const StyledTreeFolder = styled.div`
width: 100%;
display: grid;
grid-template-columns: 8px 1fr;
grid-template-rows: 1fr;
grid-column-gap: 6px;
margin-bottom: 24px;
`;
const StyledContainer = styled.div`
margin-top: 48px;
`;
const TreeFolderLoader = () => {
return (
<div>
<StyledTreeFolder>
<CircleLoader radius="3" />
<RectangleLoader width="100%" height="24" />
<CircleLoader radius="3" />
<RectangleLoader width="100%" height="24" />
<CircleLoader radius="3" />
<RectangleLoader width="100%" height="24" />
</StyledTreeFolder>
<StyledTreeFolder>
<CircleLoader radius="3" />
<RectangleLoader width="100%" height="24" />
<CircleLoader radius="3" />
<RectangleLoader width="100%" height="24" />
<CircleLoader radius="3" />
<RectangleLoader width="100%" height="24" />
</StyledTreeFolder>
<StyledTreeFolder>
<CircleLoader radius="3" />
<RectangleLoader width="100%" height="24" />
</StyledTreeFolder>
<StyledContainer>
<RectangleLoader width="100%" height="48" />
</StyledContainer>
</div>
);
};
export default TreeFolderLoader;