Ivan - Add Loading to table [skip ci]

client/src/app/demo/components-demo-page.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const React = require('react');
+const _ = require('lodash');
 const DocumentTitle = require('react-document-title');
 
 const ModalContainer = require('app-components/modal-container');
@@ -123,6 +124,20 @@ let DemoPage = React.createClass({
                 </Button>
             )
         },
+        {
+            title: 'ModalTrigger Large',
+            render: (
+                <Button onClick={function () {
+                    ModalContainer.openModal(
+                        <div>
+                            {_.range(1, 60).map(() => <div>Some modal content</div>)}
+                        </div>
+                    );
+                }}>
+                    Open Large Modal
+                </Button>
+            )
+        },
         {
             title: 'Table',
             render: (

client/src/core-components/table.js

@@ -3,6 +3,7 @@ import _ from 'lodash';
 import classNames from 'classnames';
 
 import Menu from 'core-components/menu';
+import Loading from 'core-components/loading';
 
 class Table extends React.Component {
     static propTypes = {
@@ -13,6 +14,7 @@ class Table extends React.Component {
         })),
         rows: React.PropTypes.arrayOf(React.PropTypes.object),
         pageSize: React.PropTypes.number,
+        loading: React.PropTypes.bool,
         type: React.PropTypes.oneOf(['default'])
     };
 
@@ -34,9 +36,10 @@ class Table extends React.Component {
                         </tr>
                     </thead>
                     <tbody>
-                        {this.props.rows.map(this.renderRow.bind(this))}
+                        {(!this.props.loading) ? this.props.rows.map(this.renderRow.bind(this)) : null}
                     </tbody>
                 </table>
+                {(this.props.loading) ? this.renderLoading() : null}
                 {(this.props.pageSize && this.props.rows.length > this.props.pageSize) ? this.renderNavigation() : null}
             </div>
         );
@@ -86,6 +89,14 @@ class Table extends React.Component {
         );
     }
 
+    renderLoading() {
+        return (
+            <div className="table__loading-wrapper">
+                <Loading className="table__loading" backgrounded size="large"/>
+            </div>
+        )
+    }
+
     onNavigationItemClick(index) {
         this.setState({
             page: index + 1

client/src/core-components/table.scss

@@ -48,4 +48,15 @@
     &__navigation {
         margin-top: 10px;
     }
+
+    &__loading-wrapper {
+        min-height: 200px;
+    }
+
+    &__loading {
+        position: initial;
+        width: initial;
+        height: initial;
+        margin: auto;
+    }
 }