Merge pull request #126 from corgicode/feature/loading-compo

Closes #83 - Creates a <loading> component that displays while waiting for data as a generic way

Author: dvidsilva

src/components/loading/Large.js

@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import TintedHeader from '../../components/misc/TintedHeader';
+
+class LoadingLarge extends Component {
+    static propTypes = {
+        children: PropTypes.oneOfType([
+            PropTypes.node,
+            PropTypes.arrayOf(PropTypes.node),
+        ]).isRequired,
+        loading: PropTypes.bool,
+        data: PropTypes.any,
+        title: PropTypes.string,
+        minimun: PropTypes.number,
+    };
+
+    static defaultProps = {
+        title: 'Loading...',
+        minimun: 800,
+    }
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            minimunElapsed: false,
+        };
+    }
+
+    componentDidMount() {
+        setTimeout(() => {
+            this.setState({
+                minimunElapsed: true,
+            });
+        }, this.props.minimun);
+    }
+
+    render() {
+        return(
+            <div>
+                {
+                    (this.state.minimunElapsed && (!this.props.loading || this.props.data)) ?
+                        this.props.children :
+                        <TintedHeader title={ this.props.title } />
+                }
+            </div>
+        );
+    }
+}
+
+export default LoadingLarge;

src/containers/profile/index.js

@@ -8,6 +8,7 @@ import { bindActionCreators } from 'redux';
 import E404 from '../404/';
 import ProfileComponent from '../../components/profile';
 import _get from 'lodash/get';
+import LoadingLarge from '../../components/loading/Large';
 
 class Profile extends React.Component {
     static propTypes = {
@@ -37,12 +38,14 @@ class Profile extends React.Component {
     }
 
     render() {
-        const { profile, self, submits } = this.props;
+        const { profile, self, submits, username } = this.props;
+
         return(
-            <div>
-                {!this.state.loading && this.props.profile && <ProfileComponent profile={profile} self={self} submits={ submits }/>}
-                {!this.state.loading && !this.props.profile && <E404 />}
-            </div>);
+            <LoadingLarge loading={ this.state.loading } title={username ? `Loading profile for ${username}` : '' }>
+                {this.props.profile && <ProfileComponent profile={profile} self={self} submits={ submits }/>}
+                {!this.props.profile && <E404 />}
+            </LoadingLarge>
+        );
     }
 }