Keep children in layout when spinner is loading. Tests updated.

Author: Jason Myers

src/components/Spinner.js

@@ -59,35 +59,56 @@ const Spinner = props => {
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 99,
+    visibility: 'visible',
     ...fullscreen_style
   };
 
-  if (!children || (loading_state && loading_state.is_loading)) {
-    if (fullscreen) {
-      return (
-        <div className={fullscreenClassName} style={fullscreenStyle}>
+  const coveringStyle = {
+    visibility: 'visible'
+  };
+
+  const hiddenStyle = {
+    visibility: 'hidden',
+    position: 'relative',
+    display: 'inline-block'
+  };
+
+  // Defaulted styles above to the situation where spinner has no children
+  // now include properties if spinner has children
+  if (children) {
+    // include covering style additions
+    coveringStyle.position = 'absolute';
+    coveringStyle.top = 0;
+    coveringStyle.height = '100%';
+    coveringStyle.width = '100%';
+    coveringStyle.display = 'flex';
+    coveringStyle.justifyContent = 'center';
+    coveringStyle.alignItems = 'center';
+
+    // remove hidden style additions
+    delete hiddenStyle.display;
+  }
+
+  const showSpinner = !children || (loading_state && loading_state.is_loading);
+
+  return (
+    <div style={showSpinner ? hiddenStyle : {}}>
+      {children}
+      {showSpinner && (
+        <div
+          style={fullscreen ? fullscreenStyle : coveringStyle}
+          className={fullscreen && fullscreenClassName}
+        >
           <RSSpinner
             color={isSpinnerColor ? color : null}
             style={{color: !isSpinnerColor && color, ...spinnerStyle}}
             className={spinnerClassName}
             {...omit(['setProps'], otherProps)}
           />
         </div>
-      );
-    }
-    return (
-      <RSSpinner
-        color={isSpinnerColor ? color : null}
-        style={{color: !isSpinnerColor && color, ...spinnerStyle}}
-        className={spinnerClassName}
-        {...omit(['setProps'], otherProps)}
-      />
-    );
-  }
-  if (type(children) !== 'Object' || type(children) !== 'Function') {
-    return <Fragment>{children}</Fragment>;
-  }
-  return children;
+      )}
+    </div>
+  );
 };
 
 Spinner._dashprivate_isLoadingComponent = true;

src/components/__tests__/Spinner.test.js

@@ -12,36 +12,74 @@ describe('Spinner', () => {
   });
 
   test("renders its content if object isn't loading", () => {
-    const {container: spinner, rerender} = render(<Spinner>Some spinner content</Spinner>);
+    const {container: All, rerender} = render(
+      <Spinner>Some spinner content</Spinner>
+    );
 
-    expect(spinner).toHaveTextContent('Some spinner content');
+    expect(All).toHaveTextContent('Some spinner content');
 
     rerender(
       <Spinner loading_state={{is_loading: true}}>Some spinner content</Spinner>
     );
 
-    expect(spinner).not.toHaveTextContent('Some spinner content');
+    const overAll = All.firstChild;
+    const spinner = overAll.lastChild;
+
+    expect(overAll).toHaveTextContent('Some spinner content');
     expect(spinner.firstChild).toHaveClass('spinner-border');
   });
 
   test('applies additional CSS classes when props are set', () => {
     // grow spinner
-    const {container: {firstChild: spinnerGrow}} = render(<Spinner type="grow" />);
+    const {
+      container: {firstChild: overAll}
+    } = render(<Spinner type="grow" />);
+    const spinner = overAll.lastChild;
 
-    expect(spinnerGrow).toHaveClass('spinner-grow');
+    expect(spinner.firstChild).toHaveClass('spinner-grow');
 
     // spinner sizes
-    const {container: {firstChild: spinnerSm}} = render(<Spinner size="sm" />);
-    const {container: {firstChild: spinnerLg}} = render(<Spinner size="lg" />);
+    const {
+      container: {
+        firstChild: {
+          firstChild: {firstChild: spinnerSm}
+        }
+      }
+    } = render(<Spinner size="sm" />);
+    const {
+      container: {
+        firstChild: {
+          firstChild: {firstChild: spinnerLg}
+        }
+      }
+    } = render(<Spinner size="lg" />);
 
     expect(spinnerSm).toHaveClass('spinner-border-sm');
     expect(spinnerLg).toHaveClass('spinner-border-lg');
   });
 
   test('applies contextual colors with "color" prop', () => {
-    const {container: {firstChild: spinnerPrimary}} = render(<Spinner color="primary" />);
-    const {container: {firstChild: spinnerSuccess}} = render(<Spinner color="success" />);
-    const {container: {firstChild: spinnerDark}} = render(<Spinner color="dark" />);
+    const {
+      container: {
+        firstChild: {
+          firstChild: {firstChild: spinnerPrimary}
+        }
+      }
+    } = render(<Spinner color="primary" />);
+    const {
+      container: {
+        firstChild: {
+          firstChild: {firstChild: spinnerSuccess}
+        }
+      }
+    } = render(<Spinner color="success" />);
+    const {
+      container: {
+        firstChild: {
+          firstChild: {firstChild: spinnerDark}
+        }
+      }
+    } = render(<Spinner color="dark" />);
 
     expect(spinnerPrimary).toHaveClass('text-primary');
     expect(spinnerSuccess).toHaveClass('text-success');