From 0524cfe4caeef0497d3294b8dc7ab2e8e51ffdab Mon Sep 17 00:00:00 2001 From: William Petit 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 (
-
- {this.renderBoard()} -
+ {this.renderBoard()}
); @@ -22,16 +21,20 @@ export class BoardPage extends React.Component { renderBoard() { const { kanboard } = this.props; + if (!kanboard) { - return

Loading

+ return } + return ( - - {kanboard} - +
+ + {kanboard} + +
); } 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 ( +
+
+
+
+
+
+ ) + } +} \ 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; + } + }