feat(loader): modify layout, blue background, with smaller and centered logo

src/components/loader/index.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import logo from './loader-pulse-2-alpha.gif';
+import logo from './loader-pulse-2.gif';
 import './style.css';
 
 const Loader = () => {
 return (
-<div className="loader">
+<div className="loader bg-primary">
 	<img src={logo} alt="Loading..." />
 </div>);
 };

src/components/loader/style.css

@@ -1,9 +1,18 @@
 .loader {
-  display: flex;
+  top:0;
-  justify-content: center;
+  left:0;
-  align-items: center;
+  height:100%;
-	
+  width:100%;
-  /* Preserve aspet ratio */
+  position:fixed;
-  min-width: 100%;
+  z-index:15;
-  min-height: 100%;
+}
+
+.loader > img {
+  width:150px;
+  height:150px;
+  position:absolute;
+  margin:-125px 0 0 -125px;
+  top:50%;
+  left:50%;
+  z-index:16;
 }

src/components/wait/index.jsx

@@ -1,12 +1,8 @@
 import React from 'react';
 import Loader from '../loader';
-import './style.scss';
 
 const Wait = () => {
-return (
+return (<Loader />);
-<div className="waiting">
-	<Loader />
-</div>);
 };
 
 

src/components/wait/style.scss

@@ -1,22 +0,0 @@
-@mixin border-radius($radius) {
-  -webkit-border-radius: $radius;
-     -moz-border-radius: $radius;
-      -ms-border-radius: $radius;
-          border-radius: $radius;
-}
-
-.waiting {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  width: 100%;
-  left: 0px;
-  z-index: 15;
-
-  .loader {
-    @include border-radius(10px);
-    min-width: 200px;
-    background-color: black; 
-  }
-}