Moved spinner into separate React class

Author: George Schneeloch

ui/jstests/util/test_react_spinner.jsx

@@ -0,0 +1,31 @@
+define(['QUnit', 'jquery', 'react', 'test_utils', 'react_spinner'],
+  function (QUnit, $, React, TestUtils, ReactSpinner) {
+    "use strict";
+
+    QUnit.module('Test ReactSpinner', {
+      beforeEach: function () {
+        TestUtils.setup();
+      },
+      afterEach: function () {
+        TestUtils.cleanup();
+      }
+    });
+
+    QUnit.test('Test turning spinner on', function (assert) {
+      var done = assert.async();
+
+      var afterMount = function (component) {
+        // Assert that spinner turns on.
+        assert.equal(
+          $(React.findDOMNode(component)).find(".spinner").size(),
+          1
+        );
+        done();
+      };
+
+      React.addons.TestUtils.renderIntoDocument(
+        <ReactSpinner ref={afterMount}/>
+      );
+    });
+  }
+);

ui/static/ui/js/require_config.js

@@ -5,7 +5,7 @@ var REQUIRE_PATHS = {
   bootstrap: "bootstrap/dist/js/bootstrap.min",
   icheck: "icheck/icheck.min",
   retina: "retina.js/dist/retina.min",
-  React: "react/react-with-addons.min",
+  React: "react/react-with-addons",
   react_infinite: "react-infinite/dist/react-infinite.min",
   react_datagrid: "../lib/js/react-datagrid.min",
   lodash: "lodash/lodash.min",
@@ -49,6 +49,7 @@ var REQUIRE_PATHS = {
   icheckbox: "../ui/js/util/icheckbox.jsx?noext",
   infinite_list: "../ui/js/util/infinite_list.jsx?noext",
   react_overlay_loader: "../ui/js/util/react_overlay_loader.jsx?noext",
+  react_spinner: "../ui/js/util/react_spinner.jsx?noext",
   select2_component: "../ui/js/util/select2_component.jsx?noext",
   status_box: "../ui/js/util/status_box.jsx?noext",
 };

ui/static/ui/js/util/react_overlay_loader.jsx

@@ -1,32 +1,18 @@
-define("react_overlay_loader", ["react", "spin"],
-  function (React, Spinner) {
+define("react_overlay_loader", ["react", "react_spinner"],
+  function (React, ReactSpinner) {
     'use strict';
 
     /**
      * Adapted from react-loader
      * https://github.com/quickleft/react-loader
      */
     return React.createClass({
-      componentDidUpdate: function () {
-        this.spin();
-      },
-      componentDidMount: function () {
-        this.spin();
-      },
-      spin: function () {
-        if (this.isMounted() && !this.props.loaded) {
-          var target = React.findDOMNode(this.refs.loader);
-
-          var spinner = new Spinner({zIndex: 0});
-          spinner.spin(target);
-        }
-      },
       render: function () {
         var loader;
         var opacity = 1;
 
         if (!this.props.loaded) {
-          loader = <div ref="loader"/>;
+          loader = <ReactSpinner />;
           opacity = 0.6;
         }
         var children;

ui/static/ui/js/util/react_spinner.jsx

@@ -0,0 +1,39 @@
+define("react_spinner", ["react", "spin", "jquery"],
+  function (React, Spinner, $) {
+    'use strict';
+
+    return React.createClass({
+      spin: function () {
+        if (this.isMounted()) {
+          var target = React.findDOMNode(this);
+          target.innerHTML = '';
+
+          var spinner = this.makeSpinner();
+          spinner.spin(target);
+        }
+      },
+      makeSpinner: function() {
+        var props = $.extend({}, this.props);
+        if (props.zIndex === undefined) {
+          props.zIndex = 0;
+        }
+        return new Spinner(props);
+      },
+      componentDidUpdate: function () {
+        this.spin();
+      },
+      componentDidMount: function () {
+        this.spin();
+      },
+      render: function() {
+        var radius = this.makeSpinner().opts.radius;
+
+        return <div style={{
+          width: radius * 2,
+          left: radius
+        }}>
+          </div>;
+      }
+    });
+  }
+);

ui/templates/repository.html

@@ -120,6 +120,9 @@
 <script type="text/jsx"
         src="{% static "ui/js/util/react_overlay_loader.jsx" %}">
 </script>
+<script type="text/jsx"
+        src="{% static "ui/js/util/react_spinner.jsx" %}">
+</script>
 <script type="text/jsx"
         src="{% static "ui/js/util/select2_component.jsx" %}">
 </script>