fix: Consolodate full screen loaders in to one component

client/src/components/helpers/Loader.js

@@ -1,10 +1,20 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Spinner from 'react-spinkit';
 
-function Loader() {
-  return <Spinner name='ball-clip-rotate-multiple' />;
+import './loader.css';
+
+function Loader({ fullScreen }) {
+  return (
+    <div className={fullScreen ? 'full-screen-wrapper' : ''}>
+      <Spinner name='ball-clip-rotate-multiple' />
+    </div>
+  );
 }
 
 Loader.displayName = 'Loader';
+Loader.propTypes = {
+  fullScreen: PropTypes.bool
+};
 
 export default Loader;

client/src/components/helpers/Loader.test.js

@@ -0,0 +1,33 @@
+/* global expect */
+import React from 'react';
+import { render } from 'react-testing-library';
+import 'jest-dom/extend-expect';
+
+import Loader from './Loader';
+
+describe('<Loader />', () => {
+  it('renders to the DOM', () => {
+    const { container } = render(<Loader />);
+    expect(container).toBeTruthy();
+  });
+
+  it('adds the correct class when given a fullScreen prop', () => {
+    const { container } = render(<Loader fullScreen={true} />);
+    expect(container.firstChild).toHaveClass('full-screen-wrapper');
+  });
+
+  /**
+   * As we only wrap another library Component,
+   * there is nothing much to test except snapshots
+   */
+
+  it('matches to the default render snapshot', () => {
+    const { container } = render(<Loader />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('matches the fullScreen render snapshot', () => {
+    const { container } = render(<Loader fullScreen={true} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

client/src/components/helpers/__snapshots__/Loader.test.js.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Loader /> matches the fullScreen render snapshot 1`] = `
+<div
+  class="full-screen-wrapper"
+>
+  <div
+    class="sk-fade-in sk-spinner ball-clip-rotate-multiple"
+  >
+    <div />
+    <div />
+  </div>
+</div>
+`;
+
+exports[`<Loader /> matches to the default render snapshot 1`] = `
+<div
+  class=""
+>
+  <div
+    class="sk-fade-in sk-spinner ball-clip-rotate-multiple"
+  >
+    <div />
+    <div />
+  </div>
+</div>
+`;

client/src/components/helpers/loader.css

@@ -0,0 +1,12 @@
+.full-screen-wrapper {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.full-screen-wrapper .sk-spinner {
+  transform: scale(8);
+  color: #006400;
+}