Merge pull request #7 from decentraland/feat/loader

feat: added Loader component

src/components/Loader/Loader.css

@@ -0,0 +1,7 @@
+.ui.loader:before {
+  border-color: var(--secondary) !important;
+}
+
+.ui.loader:after {
+  border-color: var(--primary) transparent transparent !important;
+}

src/components/Loader/Loader.stories.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react'
+import { storiesOf } from '@storybook/react'
+import { Loader } from '../..'
+
+storiesOf('Loader', module)
+  .add('Main Loader', () => <Loader active size="massive" />)
+  .add('Tiny Loader', () => <Loader active size="mini" />)

src/index.ts

@@ -13,8 +13,9 @@ import './themes/light-theme.css'
 
 // Semantic components themes
 import './components/Button/Button.css'
-import './components/Radio/Radio.css'
 import './components/Header/Header.css'
+import './components/Loader/Loader.css'
+import './components/Radio/Radio.css'
 import './components/Table/Table.css'
 
 // Decentraland components

test/coverage/__snapshots__/coverage.test.ts.snap

@@ -550,6 +550,66 @@ exports[`Decentraland UI - Coverage Tests Header Subheader + Header 1`] = `
 </div>
 `;
 
+exports[`Decentraland UI - Coverage Tests Loader Main Loader 1`] = `
+<div
+  style={
+    Object {
+      "alignItems": "center",
+      "bottom": 0,
+      "display": "flex",
+      "left": 0,
+      "overflow": "auto",
+      "position": "fixed",
+      "right": 0,
+      "top": 0,
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "margin": "auto",
+        "maxHeight": "100%",
+      }
+    }
+  >
+    <div
+      className="ui massive active loader"
+    />
+  </div>
+</div>
+`;
+
+exports[`Decentraland UI - Coverage Tests Loader Tiny Loader 1`] = `
+<div
+  style={
+    Object {
+      "alignItems": "center",
+      "bottom": 0,
+      "display": "flex",
+      "left": 0,
+      "overflow": "auto",
+      "position": "fixed",
+      "right": 0,
+      "top": 0,
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "margin": "auto",
+        "maxHeight": "100%",
+      }
+    }
+  >
+    <div
+      className="ui mini active loader"
+    />
+  </div>
+</div>
+`;
+
 exports[`Decentraland UI - Coverage Tests Logo Decentraland 1`] = `
 <div
   style={