Merge pull request #1358 from processing/center-loader

Fixes #1284 - Center loader in sketch list, collection list, and asset list

Author: catarak

client/modules/App/components/loader.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
 
 const Loader = () => (
-  <div className="loader">
-    <div className="loader__circle1" />
-    <div className="loader__circle2" />
+  <div className="loader-container">
+    <div className="loader">
+      <div className="loader__circle1" />
+      <div className="loader__circle2" />
+    </div>
   </div>
 );
 export default Loader;

client/styles/components/_asset-list.scss

@@ -1,7 +1,7 @@
 .asset-table-container {
   overflow-y: auto;
   max-width: 100%;
-  min-height: #{400 / $base-font-size}rem;
+  min-height: 100%;
 }
 
 .asset-table {

client/styles/components/_loader.scss

@@ -1,9 +1,17 @@
+.loader-container {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+
 .loader {
 	width: #{80 / $base-font-size }rem;
 	height: #{80 /  $base-font-size}rem;
 
 	position: relative;
-	margin: #{100 /  $base-font-size}rem auto;
 }
 
 .loader__circle1,

client/styles/components/_sketch-list.scss

@@ -1,7 +1,7 @@
 .sketches-table-container {
   overflow-y: auto;
   max-width: 100%;
-  min-height: #{400 / $base-font-size}rem;
+  min-height: 100%;
 }
 
 .sketches-table {