Commit 16fc7a00 authored by Yannis Barlas's avatar Yannis Barlas

loading components

parent 134f1a32
import React from 'react'
import styled from 'styled-components'
import { rotate360, th } from '@pubsweet/ui-toolkit'
// Courtesy of loading.io/css
const Spinner = styled.div`
display: inline-block;
height: 64px;
width: 64px;
&:after {
animation: ${rotate360} 1s linear infinite;
border: 5px solid ${th('colorPrimary')};
border-color: ${th('colorPrimary')} transparent ${th('colorPrimary')}
transparent;
border-radius: 50%;
content: ' ';
display: block;
height: 46px;
margin: 1px;
width: 46px;
}
`
const LoadingPage = styled.div`
align-items: center;
display: flex;
height: 100%;
justify-content: center;
padding-bottom: calc(${th('gridUnit')} * 2);
`
export default () => (
<LoadingPage>
<Spinner />
</LoadingPage>
)
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { fadeIn, th } from '@pubsweet/ui-toolkit'
const Page = styled.div`
flex: 1;
font-family: ${th('fontInterface')};
padding: ${th('gridUnit')} 15px;
overflow-y: auto;
> div {
animation: ${fadeIn} 0.5s;
}
`
export default Page
......@@ -4,7 +4,7 @@ import styled from 'styled-components'
const PageLayout = styled.div`
display: flex;
flex-direction: column;
height: 100vh;
height: 100%;
`
export default PageLayout
......@@ -6,10 +6,12 @@ import { Redirect, withRouter } from 'react-router-dom'
import CURRENT_USER from '../queries/currentUser'
import Loading from './Loading'
const Private = ({ children, location }) => (
<Query query={CURRENT_USER}>
{({ loading }) => {
if (loading) return 'Loading...'
if (loading) return <Loading />
if (!localStorage.getItem('token')) {
const { pathname, search = '' } = location
......
import React from 'react'
const Submit = () => <h1>Submit!</h1>
import Loading from './Loading'
class Submit extends React.Component {
constructor(props) {
super(props)
this.state = {
loading: true,
}
}
render() {
if (this.state.loading) {
setTimeout(() => {
this.setState({ loading: false })
}, 2000)
return <Loading />
}
return (
<div>
<h1>This is a wonderful submit page</h1>
<p>What joy!</p>
</div>
)
}
}
export default Submit
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment