Add debounce prop to spinner + tests

Author: tcbegley

src/components/Spinner.js

@@ -1,6 +1,6 @@
-import React, {Fragment} from 'react';
+import React, {useEffect, useState} from 'react';
 import PropTypes from 'prop-types';
-import {omit, type} from 'ramda';
+import {omit} from 'ramda';
 import {Spinner as RSSpinner} from 'reactstrap';
 import {bootstrapColors} from '../private/BootstrapColors';
 
@@ -21,9 +21,22 @@ const Spinner = props => {
     fullscreen,
     fullscreenClassName,
     fullscreen_style,
+    debounce,
     ...otherProps
   } = props;
 
+  const [showSpinner, setShowSpinner] = useState(false);
+
+  useEffect(() => {
+    if (loading_state) {
+      if (loading_state.is_loading && !showSpinner) {
+        setShowSpinner(true);
+      } else if (!loading_state.is_loading && showSpinner) {
+        setTimeout(() => setShowSpinner(false), debounce);
+      }
+    }
+  }, [loading_state]);
+
   const isBootstrapColor = bootstrapColors.has(color);
 
   const fullscreenStyle = {
@@ -75,8 +88,6 @@ const Spinner = props => {
       ...spinner_style
     };
 
-    const showSpinner = loading_state && loading_state.is_loading;
-
     return (
       <div style={showSpinner ? hiddenStyle : {}}>
         {children}
@@ -105,6 +116,10 @@ const Spinner = props => {
 
 Spinner._dashprivate_isLoadingComponent = true;
 
+Spinner.defaultProps = {
+  debounce: 0
+};
+
 Spinner.propTypes = {
   /**
    * The ID of this component, used to identify dash components
@@ -162,7 +177,13 @@ Spinner.propTypes = {
    * Boolean that determines if the loading spinner will be displayed
    * full-screen or not.
    */
-  fullscreen: PropTypes.bool
+  fullscreen: PropTypes.bool,
+
+  /**
+   * When using the spinner as a loading spinner, add a time delay to the
+   * spinner being removed to prevent flickering.
+   */
+  debounce: PropTypes.number
 };
 
 export default Spinner;

src/components/__tests__/Spinner.test.js

@@ -1,7 +1,9 @@
 import React from 'react';
-import {render} from '@testing-library/react';
+import {act, render} from '@testing-library/react';
 import Spinner from '../Spinner';
 
+jest.useFakeTimers();
+
 describe('Spinner', () => {
   test('renders a div with class "border-spinner"', () => {
     const spinner = render(<Spinner />);
@@ -12,17 +14,18 @@ describe('Spinner', () => {
   });
 
   test("renders its content if object isn't loading", () => {
-    const {container: All, rerender} = render(
+    const {container: container, rerender} = render(
       <Spinner>Some spinner content</Spinner>
     );
 
-    expect(All).toHaveTextContent('Some spinner content');
+    expect(container).toHaveTextContent('Some spinner content');
+        expect(container.querySelector('div.spinner-border')).toBe(null);
 
     rerender(
       <Spinner loading_state={{is_loading: true}}>Some spinner content</Spinner>
     );
 
-    const overAll = All.firstChild;
+    const overAll = container.firstChild;
     const spinner = overAll.lastChild;
 
     expect(overAll).toHaveTextContent('Some spinner content');
@@ -64,4 +67,31 @@ describe('Spinner', () => {
     expect(spinnerSuccess).toHaveClass('text-success');
     expect(spinnerDark).toHaveClass('text-dark');
   });
+
+  test('spinner can be debounced with debounce prop', () => {
+    const {container: container, rerender} = render(
+      <Spinner loading_state={{is_loading: true}} debounce={1000}>
+        Some spinner content
+      </Spinner>
+    );
+
+    const overAll = container.firstChild;
+    const spinner = overAll.lastChild;
+
+    expect(overAll).toHaveTextContent('Some spinner content');
+    expect(spinner.firstChild).toHaveClass('spinner-border');
+
+    rerender(
+      <Spinner loading_state={{is_loading: false}} debounce={1000}>
+        Some spinner content
+      </Spinner>
+    );
+
+    expect(overAll).toHaveTextContent('Some spinner content');
+    expect(spinner.firstChild).toHaveClass('spinner-border');
+
+    act(() => jest.advanceTimersByTime(1000));
+
+    expect(container.querySelector('div.spinner-border')).toBe(null);
+  });
 });