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>
+    )
+  }
+}

client/src/sass/_all.scss

@@ -1,3 +1,4 @@
 @import 'bulma/bulma.sass';
 @import '_base.scss';
+@import '_loader.scss';
 @import '_kanboard.scss';

client/src/sass/_loader.scss

@@ -0,0 +1,44 @@
+.loader-container {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    height: 100%;
+    align-items: center;
+}
+
+.lds-ripple {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+    transform: scale(2);
+}
+
+.lds-ripple div {
+    position: absolute;
+    border: 4px solid $info;
+    opacity: 1;
+    border-radius: 50%;
+    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+
+.lds-ripple div:nth-child(2) {
+    animation-delay: -0.5s;
+}
+
+@keyframes lds-ripple {
+    0% {
+      top: 36px;
+      left: 36px;
+      width: 0;
+      height: 0;
+      opacity: 1;
+    }
+    100% {
+      top: 0px;
+      left: 0px;
+      width: 72px;
+      height: 72px;
+      opacity: 0;
+    }
+  }