Dashboard loading (#142)
* Fixed: Loading indicator never appears Added: Loading indicator to dashboard when loading first results * Less assumptions * Fixes: Image uploads not working * Fixes #136 - Keyboard shortcuts should work when editor is not focused * Allow images to be dragged anywhere on document editor * Fixes #137 - vertical alignment * Restore shortcuts with editor focus * Restore 'e' to edit current document Fixed up ? to open keyboard shortcuts * wip * LoadinglistPlaceholder * WIP * Refactor * DRY logic
This commit is contained in:
parent
b6616cd05a
commit
1bef5ddccb
|
@ -21,9 +21,10 @@ const Container = styled.div`
|
|||
z-index: 9999;
|
||||
|
||||
background-color: #03A9F4;
|
||||
width: 0;
|
||||
width: 100%;
|
||||
animation: ${loadingFrame} 4s ease-in-out infinite;
|
||||
animation-delay: 250ms;
|
||||
margin-left: -100%;
|
||||
`;
|
||||
|
||||
const Loader = styled.div`
|
||||
|
|
|
@ -0,0 +1,48 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
|
||||
import styled from 'styled-components';
|
||||
import { pulsate } from 'styles/animations';
|
||||
import { color } from 'styles/constants';
|
||||
import Flex from 'components/Flex';
|
||||
|
||||
import { randomInteger } from 'utils/random';
|
||||
|
||||
const randomValues = Array.from(
|
||||
new Array(5),
|
||||
() => `${randomInteger(85, 100)}%`
|
||||
);
|
||||
|
||||
export default (props: Object) => {
|
||||
return (
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName="fadeIn"
|
||||
transitionAppear
|
||||
transitionEnter
|
||||
transitionLeave
|
||||
transitionAppearTimeout={0}
|
||||
transitionEnterTimeout={0}
|
||||
transitionLeaveTimeout={0}
|
||||
>
|
||||
<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>
|
||||
</ReactCSSTransitionGroup>
|
||||
);
|
||||
};
|
||||
|
||||
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;
|
||||
`;
|
|
@ -0,0 +1,3 @@
|
|||
// @flow
|
||||
import LoadingListPlaceholder from './LoadingListPlaceholder';
|
||||
export default LoadingListPlaceholder;
|
|
@ -0,0 +1,33 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
|
||||
import styled from 'styled-components';
|
||||
import Mask from './components/Mask';
|
||||
import Flex from 'components/Flex';
|
||||
|
||||
export default (props: Object) => {
|
||||
return (
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName="fadeIn"
|
||||
transitionAppearTimeout={0}
|
||||
transitionEnterTimeout={0}
|
||||
transitionLeaveTimeout={0}
|
||||
transitionAppear
|
||||
transitionEnter
|
||||
transitionLeave
|
||||
>
|
||||
<Item column auto>
|
||||
<Mask header />
|
||||
<Mask />
|
||||
</Item>
|
||||
<Item column auto>
|
||||
<Mask header />
|
||||
<Mask />
|
||||
</Item>
|
||||
</ReactCSSTransitionGroup>
|
||||
);
|
||||
};
|
||||
|
||||
const Item = styled(Flex)`
|
||||
padding: 18px 0;
|
||||
`;
|
|
@ -0,0 +1,26 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
|
||||
import Mask from './components/Mask';
|
||||
import Flex from 'components/Flex';
|
||||
|
||||
export default (props: Object) => {
|
||||
return (
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName="fadeIn"
|
||||
transitionAppearTimeout={0}
|
||||
transitionEnterTimeout={0}
|
||||
transitionLeaveTimeout={0}
|
||||
transitionAppear
|
||||
transitionEnter
|
||||
transitionLeave
|
||||
>
|
||||
<Flex column auto {...props}>
|
||||
<Mask header />
|
||||
<Mask />
|
||||
<Mask />
|
||||
<Mask />
|
||||
</Flex>
|
||||
</ReactCSSTransitionGroup>
|
||||
);
|
||||
};
|
|
@ -0,0 +1,38 @@
|
|||
// @flow
|
||||
import React, { Component } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { pulsate } from 'styles/animations';
|
||||
import { color } from 'styles/constants';
|
||||
import { randomInteger } from 'utils/random';
|
||||
import Flex from 'components/Flex';
|
||||
|
||||
class Mask extends Component {
|
||||
width: number;
|
||||
|
||||
shouldComponentUpdate() {
|
||||
return false;
|
||||
}
|
||||
|
||||
constructor(props: Object) {
|
||||
super(props);
|
||||
this.width = randomInteger(75, 100);
|
||||
}
|
||||
|
||||
render() {
|
||||
return <Redacted width={this.width} {...this.props} />;
|
||||
}
|
||||
}
|
||||
|
||||
const Redacted = styled(Flex)`
|
||||
width: ${props => (props.header ? props.width / 2 : props.width)}%;
|
||||
height: ${props => (props.header ? 28 : 18)}px;
|
||||
margin-bottom: ${props => (props.header ? 18 : 12)}px;
|
||||
background-color: ${color.smokeDark};
|
||||
animation: ${pulsate} 1.3s infinite;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
export default Mask;
|
|
@ -0,0 +1,6 @@
|
|||
// @flow
|
||||
import LoadingPlaceholder from './LoadingPlaceholder';
|
||||
import ListPlaceholder from './ListPlaceholder';
|
||||
|
||||
export default LoadingPlaceholder;
|
||||
export { ListPlaceholder };
|
|
@ -1,3 +0,0 @@
|
|||
// @flow
|
||||
import PreviewLoading from './PreviewLoading';
|
||||
export default PreviewLoading;
|
|
@ -8,7 +8,7 @@ import CollectionsStore from 'stores/CollectionsStore';
|
|||
import CollectionStore from './CollectionStore';
|
||||
|
||||
import CenteredContent from 'components/CenteredContent';
|
||||
import PreviewLoading from 'components/PreviewLoading';
|
||||
import LoadingListPlaceholder from 'components/LoadingListPlaceholder';
|
||||
|
||||
type Props = {
|
||||
collections: CollectionsStore,
|
||||
|
@ -33,7 +33,7 @@ type Props = {
|
|||
return this.store.redirectUrl
|
||||
? <Redirect to={this.store.redirectUrl} />
|
||||
: <CenteredContent>
|
||||
<PreviewLoading />
|
||||
<LoadingListPlaceholder />
|
||||
</CenteredContent>;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,6 +7,7 @@ import DocumentsStore from 'stores/DocumentsStore';
|
|||
import DocumentList from 'components/DocumentList';
|
||||
import PageTitle from 'components/PageTitle';
|
||||
import CenteredContent from 'components/CenteredContent';
|
||||
import { ListPlaceholder } from 'components/LoadingPlaceholder';
|
||||
|
||||
const Subheading = styled.h3`
|
||||
font-size: 11px;
|
||||
|
@ -31,16 +32,23 @@ type Props = {
|
|||
this.props.documents.fetchRecentlyViewed();
|
||||
}
|
||||
|
||||
get showPlaceholder() {
|
||||
const { isLoaded, isFetching } = this.props.documents;
|
||||
return !isLoaded && isFetching;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<CenteredContent>
|
||||
<PageTitle title="Home" />
|
||||
<h1>Home</h1>
|
||||
<Subheading>Recently viewed</Subheading>
|
||||
{this.showPlaceholder && <ListPlaceholder />}
|
||||
<DocumentList documents={this.props.documents.recentlyViewed} />
|
||||
|
||||
<Subheading>Recently edited</Subheading>
|
||||
<DocumentList documents={this.props.documents.recentlyEdited} />
|
||||
{this.showPlaceholder && <ListPlaceholder />}
|
||||
</CenteredContent>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -12,12 +12,12 @@ import Document from 'models/Document';
|
|||
import UiStore from 'stores/UiStore';
|
||||
import DocumentsStore from 'stores/DocumentsStore';
|
||||
import Menu from './components/Menu';
|
||||
import LoadingPlaceholder from 'components/LoadingPlaceholder';
|
||||
import Editor from 'components/Editor';
|
||||
import DropToImport from 'components/DropToImport';
|
||||
import { HeaderAction, SaveAction } from 'components/Layout';
|
||||
import LoadingIndicator from 'components/LoadingIndicator';
|
||||
import PublishingInfo from 'components/PublishingInfo';
|
||||
import PreviewLoading from 'components/PreviewLoading';
|
||||
import CenteredContent from 'components/CenteredContent';
|
||||
import PageTitle from 'components/PageTitle';
|
||||
|
||||
|
@ -263,8 +263,8 @@ const Container = styled(Flex)`
|
|||
width: 100%;
|
||||
`;
|
||||
|
||||
const LoadingState = styled(PreviewLoading)`
|
||||
margin: 80px 20px;
|
||||
const LoadingState = styled(LoadingPlaceholder)`
|
||||
margin: 90px 0;
|
||||
`;
|
||||
|
||||
const StyledDropToImport = styled(DropToImport)`
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
|
||||
import styled, { keyframes } from 'styled-components';
|
||||
import styled from 'styled-components';
|
||||
import { pulsate } from 'styles/animations';
|
||||
import { color } from 'styles/constants';
|
||||
import Flex from 'components/Flex';
|
||||
|
||||
import { randomInteger } from 'utils/random';
|
||||
|
@ -11,7 +13,7 @@ const randomValues = Array.from(
|
|||
() => `${randomInteger(85, 100)}%`
|
||||
);
|
||||
|
||||
export default (props: {}) => {
|
||||
export default (props: Object) => {
|
||||
return (
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName="fadeIn"
|
||||
|
@ -32,15 +34,9 @@ export default (props: {}) => {
|
|||
);
|
||||
};
|
||||
|
||||
const pulsate = keyframes`
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1; }
|
||||
`;
|
||||
|
||||
const Mask = styled(Flex)`
|
||||
height: ${props => (props.header ? 28 : 18)}px;
|
||||
margin-bottom: ${props => (props.header ? 32 : 14)}px;
|
||||
background-color: #ddd;
|
||||
background-color: ${color.smoke};
|
||||
animation: ${pulsate} 1.3s infinite;
|
||||
`;
|
|
@ -0,0 +1,3 @@
|
|||
// @flow
|
||||
import LoadingPlaceholder from './LoadingPlaceholder';
|
||||
export default LoadingPlaceholder;
|
|
@ -2,6 +2,7 @@
|
|||
import React, { Component } from 'react';
|
||||
import { observer, inject } from 'mobx-react';
|
||||
import CenteredContent from 'components/CenteredContent';
|
||||
import { ListPlaceholder } from 'components/LoadingPlaceholder';
|
||||
import PageTitle from 'components/PageTitle';
|
||||
import DocumentList from 'components/DocumentList';
|
||||
import DocumentsStore from 'stores/DocumentsStore';
|
||||
|
@ -16,10 +17,13 @@ import DocumentsStore from 'stores/DocumentsStore';
|
|||
}
|
||||
|
||||
render() {
|
||||
const { isLoaded, isFetching } = this.props.documents;
|
||||
|
||||
return (
|
||||
<CenteredContent column auto>
|
||||
<PageTitle title="Starred" />
|
||||
<h1>Starred</h1>
|
||||
{!isLoaded && isFetching && <ListPlaceholder />}
|
||||
<DocumentList documents={this.props.documents.starred} />
|
||||
</CenteredContent>
|
||||
);
|
||||
|
|
|
@ -12,6 +12,7 @@ class DocumentsStore {
|
|||
@observable recentlyViewedIds: Array<string> = [];
|
||||
@observable data: Map<string, Document> = new ObservableMap([]);
|
||||
@observable isLoaded: boolean = false;
|
||||
@observable isFetching: boolean = false;
|
||||
errors: ErrorsStore;
|
||||
|
||||
/* Computed */
|
||||
|
@ -34,6 +35,8 @@ class DocumentsStore {
|
|||
/* Actions */
|
||||
|
||||
@action fetchAll = async (request: string = 'list'): Promise<*> => {
|
||||
this.isFetching = true;
|
||||
|
||||
try {
|
||||
const res = await client.post(`/documents.${request}`);
|
||||
invariant(res && res.data, 'Document list not available');
|
||||
|
@ -47,6 +50,8 @@ class DocumentsStore {
|
|||
return data;
|
||||
} catch (e) {
|
||||
this.errors.add('Failed to load documents');
|
||||
} finally {
|
||||
this.isFetching = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -63,6 +68,8 @@ class DocumentsStore {
|
|||
};
|
||||
|
||||
@action fetch = async (id: string): Promise<*> => {
|
||||
this.isFetching = true;
|
||||
|
||||
try {
|
||||
const res = await client.post('/documents.info', { id });
|
||||
invariant(res && res.data, 'Document not available');
|
||||
|
@ -77,6 +84,8 @@ class DocumentsStore {
|
|||
return document;
|
||||
} catch (e) {
|
||||
this.errors.add('Failed to load documents');
|
||||
} finally {
|
||||
this.isFetching = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
@ -12,3 +12,9 @@ export const fadeAndScaleIn = keyframes`
|
|||
transform: scale(1);
|
||||
}
|
||||
`;
|
||||
|
||||
export const pulsate = keyframes`
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1; }
|
||||
`;
|
||||
|
|
|
@ -50,6 +50,7 @@ export const color = {
|
|||
/* Light Grays */
|
||||
smoke: '#F4F7FA',
|
||||
smokeLight: '#F9FBFC',
|
||||
smokeDark: '#E8EBED',
|
||||
|
||||
/* Misc */
|
||||
white: '#FFFFFF',
|
||||
|
|
Reference in New Issue