coop-cloud-chaos-patchs/outline
coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests 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
Show Stats 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;

45
app/scenes/Collection/Collection.js
View File

@ -14,7 +14,7 @@ import Collection from 'models/Collection';
import Search from 'scenes/Search';
import CenteredContent from 'components/CenteredContent';
import CollectionIcon from 'components/Icon/CollectionIcon';
import LoadingListPlaceholder from 'components/LoadingListPlaceholder';
import { ListPlaceholder } from 'components/LoadingPlaceholder';
import Button from 'components/Button';
import HelpText from 'components/HelpText';
import DocumentList from 'components/DocumentList';
@ -48,7 +48,7 @@ class CollectionScene extends Component {
loadContent = async (id: string) => {
const { collections } = this.props;
const collection = await collections.fetch(id);
const collection = collections.getById(id) || (await collections.fetch(id));
if (collection) {
this.props.ui.setActiveCollection(collection);
@ -89,23 +89,36 @@ class CollectionScene extends Component {
}
render() {
if (this.isFetching) return <LoadingListPlaceholder />;
if (!this.collection) return this.renderNotFound();
if (this.collection.isEmpty) return this.renderEmptyCollection();
if (!this.isFetching && !this.collection) {
return this.renderNotFound();
}
if (this.collection && this.collection.isEmpty) {
return this.renderEmptyCollection();
}
return (
<CenteredContent>
<PageTitle title={this.collection.name} />
<Heading>
<CollectionIcon color={this.collection.color} size={40} expanded />{' '}
{this.collection.name}
</Heading>
<Subheading>Recently edited</Subheading>
<DocumentList
documents={this.props.documents.recentlyEditedInCollection(
this.collection.id
)}
/>
{this.collection ? (
<span>
<PageTitle title={this.collection.name} />
<Heading>
<CollectionIcon
color={this.collection.color}
size={40}
expanded
/>{' '}
{this.collection.name}
</Heading>
<Subheading>Recently edited</Subheading>
<DocumentList
documents={this.props.documents.recentlyEditedInCollection(
this.collection.id
)}
/>
</span>
) : (
<ListPlaceholder count={5} />
)}
</CenteredContent>
);
}