#3: Problem with promiseTracker was fixed

Author: Andrei Arkhipov

dist/index.js

@@ -7,4 +7,12 @@ describe('Loader', () => {
     const component = shallow(<Loader loading={true} />);
     expect(component).toMatchSnapshot();
   });
+  it('should not render', () => {
+    const component = shallow(<Loader />);
+    expect(component.get(0)).toEqual(null);
+  });
+  it('should render for promiseTracker', () => {
+    const component = shallow(<Loader promiseTracker={() => ({ promiseInProgress: true })} />);
+    expect(component).toExist();
+  });
 });

specs/Loader.spec.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 const defaultLoaderStyle = {
@@ -21,54 +21,54 @@ const defaultSpinnerStyle = {
   height: 100,
 };
 
-class Loader extends Component {
-  static propTypes = {
-    color: PropTypes.string,
-    loading: PropTypes.bool,
-    background: PropTypes.string,
+const Loader = (props) => {
+  const { promiseInProgress } = props.promiseTracker ? props.promiseTracker() : false;
+  const loaderStyle = {
+    ...defaultLoaderStyle,
+    background: props.background,
   };
+  const spinnerItemsArray = [
+    { transform: 'rotate(0 50 50)', begin: '-0.9166666666666666s' },
+    { transform: 'rotate(30 50 50)', begin: '-0.8333333333333334s' },
+    { transform: 'rotate(60 50 50)', begin: '-0.75s' },
+    { transform: 'rotate(90 50 50)', begin: '-0.6666666666666666s' },
+    { transform: 'rotate(120 50 50)', begin: '-0.5833333333333334s' },
+    { transform: 'rotate(150 50 50)', begin: '-0.5s' },
+    { transform: 'rotate(180 50 50)', begin: '-0.4166666666666667s' },
+    { transform: 'rotate(210 50 50)', begin: '-0.3333333333333333s' },
+    { transform: 'rotate(240 50 50)', begin: '-0.25s' },
+    { transform: 'rotate(270 50 50)', begin: '-0.16666666666666666s' },
+    { transform: 'rotate(300 50 50)', begin: '-0.08333333333333333s' },
+    { transform: 'rotate(330 50 50)', begin: '0s' },
+  ];
+  return (
+    props.loading || promiseInProgress
+      ? <div style={loaderStyle}>
+      <div style={defaultSpinnerStyle}>
+        <svg className="lds-spinner" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
+             viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+          {spinnerItemsArray.map((item) => <g key={item.transform} transform={item.transform}>
+            <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill={props.color}>
+              <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin={item.begin} repeatCount="indefinite"/>
+            </rect>
+          </g>)}
+        </svg>
+      </div>
+    </div> : ''
+  );
+};
 
-  static defaultProps = {
-    color: '#000',
-    loading: false,
-    background: 'rgba(255,255,255,.5)',
-  };
+Loader.propTypes = {
+  color: PropTypes.string,
+  loading: PropTypes.bool,
+  background: PropTypes.string,
+  promiseTracker: PropTypes.any,
+};
 
-  render() {
-    const loaderStyle = {
-      ...defaultLoaderStyle,
-      background: this.props.background,
-    };
-    const spinnerItemsArray = [
-      { transform: 'rotate(0 50 50)', begin: '-0.9166666666666666s' },
-      { transform: 'rotate(30 50 50)', begin: '-0.8333333333333334s' },
-      { transform: 'rotate(60 50 50)', begin: '-0.75s' },
-      { transform: 'rotate(90 50 50)', begin: '-0.6666666666666666s' },
-      { transform: 'rotate(120 50 50)', begin: '-0.5833333333333334s' },
-      { transform: 'rotate(150 50 50)', begin: '-0.5s' },
-      { transform: 'rotate(180 50 50)', begin: '-0.4166666666666667s' },
-      { transform: 'rotate(210 50 50)', begin: '-0.3333333333333333s' },
-      { transform: 'rotate(240 50 50)', begin: '-0.25s' },
-      { transform: 'rotate(270 50 50)', begin: '-0.16666666666666666s' },
-      { transform: 'rotate(300 50 50)', begin: '-0.08333333333333333s' },
-      { transform: 'rotate(330 50 50)', begin: '0s' },
-    ];
-    return (
-      this.props.loading
-      && <div style={loaderStyle}>
-        <div style={defaultSpinnerStyle}>
-          <svg className="lds-spinner" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
-               viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
-            {spinnerItemsArray.map((item) => <g key={item.transform} transform={item.transform}>
-              <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill={this.props.color}>
-                <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin={item.begin} repeatCount="indefinite"/>
-              </rect>
-            </g>)}
-          </svg>
-        </div>
-      </div>
-    );
-  }
-}
+Loader.defaultProps = {
+  color: '#000',
+  loading: false,
+  background: 'rgba(255,255,255,.5)',
+};
 
 export default Loader;