New implementation of LoadingIndicator

Used to be an animated GIF, that did not work well on non-white
backgrounds; now it is an SVG, animated by JS, it should work fine on
any background.

Fixes #436

Author: birdofpreyru

__tests__/shared/components/__snapshots__/LoadingIndicator.jsx.snap

@@ -1,9 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<img
-  alt="Loading..."
-  className="src-shared-components-LoadingIndicator-___styles__style___3RNHL"
-  src="/images/2f402d440d802a10b7672b75897c47a5.gif"
-/>
+<svg
+  className="src-shared-components-LoadingIndicator-___styles__container___V7JxF"
+  viewBox="0 0 64 64"
+>
+  <circle
+    className="src-shared-components-LoadingIndicator-___styles__circle1___hEgvY"
+    cx="32"
+    cy="32"
+    r="28"
+  />
+  <circle
+    className="src-shared-components-LoadingIndicator-___styles__circle2___2-o58"
+    cx="32"
+    cy="32"
+    r="6"
+  />
+</svg>
 `;

__tests__/shared/components/tc-communities/__snapshots__/JoinCommunity.jsx.snap

@@ -35,7 +35,7 @@ exports[`Matches shallow shapshot 2`] = `
         mapThemrProps={[Function]}
         theme={
           Object {
-            "style": "src-shared-components-tc-communities-JoinCommunity-___style__loadingIndicator___2RP1u",
+            "container": "src-shared-components-tc-communities-JoinCommunity-___style__loadingIndicator___2RP1u",
           }
         }
         themePriority="adhoc-context-default"

config/jest/setup.js

@@ -1,5 +1,7 @@
 /* global Event, jest */
 
+import _ from 'lodash';
+
 global.window.matchMedia = global.window.matchMedia || function matchMedia() {
   return {
     matches: false,
@@ -8,6 +10,8 @@ global.window.matchMedia = global.window.matchMedia || function matchMedia() {
   };
 };
 
+global.window.requestAnimationFrame = _.noop;
+
 global.window.resizeTo = (width, height) => {
   global.window.innerWidth = width || global.window.innerWidth;
   global.window.innerHeight = height || global.window.innerHeight;

src/shared/components/LoadingIndicator/index.jsx

@@ -1,17 +1,81 @@
+/**
+ * Waiting indicator: two co-centric circles periodically increasing their
+ * radiuses till maximum value, then resetting it to zero.
+ *
+ * NOTE: It is implemented as class component because stand-alone animated SVG
+ * images are not well supported across all browsers yet.
+ */
+
+/* global window */
+
 import PT from 'prop-types';
-import Source from 'assets/images/ripple.gif';
 import React from 'react';
 import { themr } from 'react-css-super-themr';
 import style from './styles.scss';
 
-function LoadingIndicator({ theme }) {
-  return (
-    <img
-      alt="Loading..."
-      className={theme.style}
-      src={Source}
-    />
-  );
+class LoadingIndicator extends React.Component {
+  /**
+   * Calculates animation phase for the specified timestamp.
+   * @param {Number} timestamp Current animation time in [ms].
+   * @param {Number} shift Optional phase shift [dimensionless].
+   * @return {Number} Returns animation phase: a number in [0.0; 1.0] range,
+   *  specifying current position inside animation loop. You may note that
+   *  the result does not change linearly with time, instead it goes quadratic
+   *  in a way that makes animation progress faster in the beginning, and
+   *  slower in the end of a cycle.
+   */
+  static calcPhase(timestamp, shift = 0) {
+    const PERIOD = 2; /* [s] */
+    return ((timestamp / 1000 / PERIOD) + shift) % 1;
+  }
+
+  componentDidMount() {
+    this.animationId = window.requestAnimationFrame(ts => this.animation(ts));
+  }
+
+  componentWillUnmount() {
+    window.cancelAnimationFrame(this.animationId);
+  }
+
+  /* Moves animation forward. */
+  animation(timestamp) {
+    if (this.circle1) {
+      const phase1 = LoadingIndicator.calcPhase(timestamp);
+      this.circle1.setAttribute('r', 28 * phase1 * (2.0 - phase1));
+      this.circle1.setAttribute('opacity', 1.0 - (phase1 * phase1));
+    }
+    if (this.circle2) {
+      const phase2 = LoadingIndicator.calcPhase(timestamp, 0.5);
+      this.circle2.setAttribute('r', 28 * phase2 * (2.0 - phase2));
+      this.circle2.setAttribute('opacity', 1.0 - (phase2 * phase2));
+    }
+    this.animationId = window.requestAnimationFrame(ts => this.animation(ts));
+  }
+
+  render() {
+    const { theme } = this.props;
+    return (
+      <svg
+        className={theme.container}
+        viewBox="0 0 64 64"
+      >
+        <circle
+          className={theme.circle1}
+          cx="32"
+          cy="32"
+          r="28"
+          ref={(node) => { this.circle1 = node; }}
+        />
+        <circle
+          className={theme.circle2}
+          cx="32"
+          cy="32"
+          r="6"
+          ref={(node) => { this.circle2 = node; }}
+        />
+      </svg>
+    );
+  }
 }
 
 LoadingIndicator.propTypes = {

src/shared/components/LoadingIndicator/styles.scss

@@ -1,7 +1,21 @@
-@import '~styles/tc-styles';
+@import '~styles/mixins';
 
-.style {
+.container {
   display: block;
+  height: 64px;
   margin: 0 auto;
   text-align: center;
+  width: 64px;
+}
+
+.circle1 {
+  fill: none;
+  stroke: #149efe;
+  stroke-width: 2;
+}
+
+.circle2 {
+  fill: none;
+  stroke: #e3e4e5;
+  stroke-width: 2;
 }

src/shared/components/tc-communities/JoinCommunity/index.jsx

@@ -53,7 +53,7 @@ export default function JoinCommunity({
         { state === STATE.JOINING ? (
           <div>
             <p>Joining...</p>
-            <LoadingIndicator theme={{ style: style.loadingIndicator }} />
+            <LoadingIndicator theme={{ container: style.loadingIndicator }} />
           </div>
         ) : label}
       </button>