Merge pull request #1173 from hypothesis/react-spinner

Convert loading spinner to Preact

src/sidebar/components/spinner.js

 'use strict';
 
-// @ngInject
-function SpinnerController($animate, $element) {
-  // ngAnimate conflicts with the spinners own CSS
-  $animate.enabled(false, $element);
-}
+const { createElement } = require('preact');
 
-module.exports = {
-  controller: SpinnerController,
-  controllerAs: 'vm',
-  template: `
-    <div class="spinner__container">
-      <span class="spinner">
-        <span><span>
-        </span></span>
+/**
+ * Loading indicator.
+ */
+function Spinner() {
+  // The `spinner__container` div only exists to center the spinner within
+  // the `<spinner>` Angular component element. Once consumers of this component
+  // have been converted to Preact, we should be able to remove this.
+  return (
+    <div className="spinner__container">
+      {/* See `.spinner` CSS definition for an explanation of the nested spans. */}
+      <span className="spinner">
+        <span>
+          <span />
+        </span>
       </span>
     </div>
-  `,
-};
+  );
+}
+
+Spinner.propTypes = {};
+
+module.exports = Spinner;

src/sidebar/components/test/spinner-test.js

 'use strict';
 
-const angular = require('angular');
+const { createElement } = require('preact');
+const { mount } = require('enzyme');
 
-const util = require('../../directive/test/util');
+const Spinner = require('../spinner');
 
-const module = angular.mock.module;
-const inject = angular.mock.inject;
+describe('Spinner', function() {
+  const createSpinner = (props = {}) => mount(<Spinner {...props} />);
 
-describe('spinner', function() {
-  let $animate = null;
-  let $element = null;
-  let sandbox = null;
-
-  before(function() {
-    angular.module('h', []).component('spinner', require('../spinner'));
-  });
-
-  beforeEach(module('h'));
-
-  beforeEach(inject(function(_$animate_) {
-    sandbox = sinon.sandbox.create();
-
-    $animate = _$animate_;
-    sandbox.spy($animate, 'enabled');
-
-    $element = util.createDirective(document, 'spinner');
-  }));
-
-  afterEach(function() {
-    sandbox.restore();
-  });
-
-  it('disables ngAnimate animations for itself', function() {
-    assert.calledOnce($animate.enabled);
-
-    const [enabled, jqElement] = $animate.enabled.getCall(0).args;
-    assert.equal(enabled, false);
-    assert.equal(jqElement[0], $element[0]);
+  // A spinner is a trivial component with no props. Just make sure it renders.
+  it('renders', () => {
+    const wrapper = createSpinner();
+    assert.isTrue(wrapper.exists('.spinner'));
   });
 });

src/sidebar/index.js

@@ -191,7 +191,7 @@ function startAngularApp(config) {
       'sortMenu',
       wrapReactComponent(require('./components/sort-menu'))
     )
-    .component('spinner', require('./components/spinner'))
+    .component('spinner', wrapReactComponent(require('./components/spinner')))
     .component('streamContent', require('./components/stream-content'))
     .component('svgIcon', wrapReactComponent(require('./components/svg-icon')))
     .component('tagEditor', require('./components/tag-editor'))