yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved loading state

Browse Source
This commit is contained in:
Tom Moor
2017-11-19 21:50:42 -08:00
parent 81edb55d56
commit a626b78616
3 changed files with 29 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
app/components/LoadingListPlaceholder/LoadingListPlaceholder.js
View File

@@ -1,40 +0,0 @@
// @flow
import React from 'react';
import styled from 'styled-components';
import { pulsate } from 'shared/styles/animations';
import { color } from 'shared/styles/constants';
import Flex from 'shared/components/Flex';
import Fade from 'components/Fade';
import { randomInteger } from 'shared/random';
const randomValues = Array.from(
new Array(5),
() => `${randomInteger(85, 100)}%`
);
export default (props: Object) => {
return (
<Fade>
<Item column auto>
<Mask style={{ width: randomValues[0] }} header />
<Mask style={{ width: randomValues[1] }} />
</Item>
<Item column auto>
<Mask style={{ width: randomValues[2] }} header />
<Mask style={{ width: randomValues[3] }} />
</Item>
</Fade>
);
};
const Item = styled(Flex)`
padding: 18px 0;
`;
const Mask = styled(Flex)`
height: ${props => (props.header ? 28 : 18)}px;
margin-bottom: ${props => (props.header ? 18 : 0)}px;
background-color: ${color.smoke};
animation: ${pulsate} 1.3s infinite;
`;

3
app/components/LoadingListPlaceholder/index.js
View File

@@ -1,3 +0,0 @@
// @flow
import LoadingListPlaceholder from './LoadingListPlaceholder';
export default LoadingListPlaceholder;