fix(DIST-454): Fixes spinner animation

Author: Lluis Fons

src/core/views/components/spinner.js

@@ -1,8 +1,7 @@
-import 'spin.js/spin.css'
-
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Spinner as Spin } from 'spin.js'
+import styled from 'styled-components'
 
 const defaultConfig = {
   lines: 16,
@@ -20,6 +19,47 @@ const defaultConfig = {
   zIndex: 999
 }
 
+const SpinnerWrapper = styled.div`
+  @keyframes spinner-line-fade-more {
+    0%, 100% {
+      opacity: 0; /* minimum opacity */
+    }
+    1% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes spinner-line-fade-quick {
+    0%, 39%, 100% {
+      opacity: 0.25; /* minimum opacity */
+    }
+    40% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes spinner-line-fade-default {
+    0%, 100% {
+      opacity: 0.22; /* minimum opacity */
+    }
+    1% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes spinner-line-shrink {
+    0%, 25%, 100% {
+      /* minimum scale and opacity */
+      transform: scale(0.5);
+      opacity: 0.25;
+    }
+    26% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+`
+
 class Spinner extends Component {
   constructor (props) {
     super(props)
@@ -63,7 +103,7 @@ class Spinner extends Component {
 
   render () {
     return (
-      <div ref={this.getRef} />
+      <SpinnerWrapper ref={this.getRef} />
     )
   }
 }