Add board loader animation

client/src/components/BoardPage/BoardPage.jsx

@@ -5,6 +5,7 @@ import Board from '@lourenci/react-kanban';
 import { fetchIssues } from '../../store/actions/issues';
 import { fetchBoards } from '../../store/actions/boards';
 import { buildKanboard, moveCard } from '../../store/actions/kanboards';
+import { Loader } from '../Loader';
 
 export class BoardPage extends React.Component {
 
@@ -12,9 +13,7 @@ export class BoardPage extends React.Component {
     return (
       <Page>
         <div className="container is-fluid">
-          <div className="kanboard-container is-fullheight">
-            {this.renderBoard()}
-          </div>
+          {this.renderBoard()}
         </div>
       </Page>
     );
@@ -22,16 +21,20 @@ export class BoardPage extends React.Component {
 
   renderBoard() {
     const { kanboard } = this.props;
+    
     if (!kanboard) {
-      return <p>Loading</p>
+      return <Loader></Loader>
     }
+
     return (
-      <Board disableLaneDrag={true}
-        renderCard={this.renderCard}
-        renderLaneHeader={this.renderLaneHeader}
-        onCardDragEnd={this.onCardDragEnd.bind(this)}>
-        {kanboard}
-      </Board>
+      <div className="kanboard-container is-fullheight">
+        <Board disableLaneDrag={true}
+          renderCard={this.renderCard}
+          renderLaneHeader={this.renderLaneHeader}
+          onCardDragEnd={this.onCardDragEnd.bind(this)}>
+          {kanboard}
+        </Board>
+      </div>
     );
   }
 

client/src/components/Loader.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export class Loader extends React.Component {
+  render() {
+    return (
+      <div className="loader-container">
+        <div className="lds-ripple">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+    )
+  }
+}