From 0524cfe4caeef0497d3294b8dc7ab2e8e51ffdab Mon Sep 17 00:00:00 2001
From: William Petit <wpetit@cadoles.com>
Date: Thu, 5 Dec 2019 15:59:05 +0100
Subject: [PATCH] Add board loader animation

---
 client/src/components/BoardPage/BoardPage.jsx | 23 +++++-----
 client/src/components/Loader.jsx              | 14 ++++++
 client/src/sass/_all.scss                     |  1 +
 client/src/sass/_loader.scss                  | 44 +++++++++++++++++++
 4 files changed, 72 insertions(+), 10 deletions(-)
 create mode 100644 client/src/components/Loader.jsx
 create mode 100644 client/src/sass/_loader.scss

diff --git a/client/src/components/BoardPage/BoardPage.jsx b/client/src/components/BoardPage/BoardPage.jsx
index e388ef1..e820d6b 100644
--- a/client/src/components/BoardPage/BoardPage.jsx
+++ b/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>
     );
   }
 
diff --git a/client/src/components/Loader.jsx b/client/src/components/Loader.jsx
new file mode 100644
index 0000000..5632248
--- /dev/null
+++ b/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>
+    )
+  }
+}
\ No newline at end of file
diff --git a/client/src/sass/_all.scss b/client/src/sass/_all.scss
index 4bc3024..e12e0c0 100644
--- a/client/src/sass/_all.scss
+++ b/client/src/sass/_all.scss
@@ -1,3 +1,4 @@
 @import 'bulma/bulma.sass';
 @import '_base.scss';
+@import '_loader.scss';
 @import '_kanboard.scss';
\ No newline at end of file
diff --git a/client/src/sass/_loader.scss b/client/src/sass/_loader.scss
new file mode 100644
index 0000000..b059a93
--- /dev/null
+++ b/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;
+    }
+  }