Adding semi-functional rendering demo of app

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

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Loader rendering 1`] = `
+<Loader>
+  <div
+    className="loader"
+  >
+    <Loader
+      color="currentColor"
+      size="24"
+    >
+      <svg
+        fill="none"
+        height="24"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <line
+          x1="12"
+          x2="12"
+          y1="2"
+          y2="6"
+        />
+        <line
+          x1="12"
+          x2="12"
+          y1="18"
+          y2="22"
+        />
+        <line
+          x1="4.93"
+          x2="7.76"
+          y1="4.93"
+          y2="7.76"
+        />
+        <line
+          x1="16.24"
+          x2="19.07"
+          y1="16.24"
+          y2="19.07"
+        />
+        <line
+          x1="2"
+          x2="6"
+          y1="12"
+          y2="12"
+        />
+        <line
+          x1="18"
+          x2="22"
+          y1="12"
+          y2="12"
+        />
+        <line
+          x1="4.93"
+          x2="7.76"
+          y1="19.07"
+          y2="16.24"
+        />
+        <line
+          x1="16.24"
+          x2="19.07"
+          y1="7.76"
+          y2="4.93"
+        />
+      </svg>
+    </Loader>
+    <div
+      className="message"
+    >
+      Loading...
+    </div>
+  </div>
+</Loader>
+`;

src/components/Loader/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import LoaderIcon from 'react-feather/dist/icons/loader';
+
+import style from './style.module.css';
+
+const Loader = () => (
+  <div className={ style.loader }>
+    <LoaderIcon />
+    <div className={ style.message }>Loading...</div>
+  </div>
+);
+
+export default Loader;

src/components/Loader/style.module.css

@@ -0,0 +1,43 @@
+@import url('../../globals.module.css');
+
+.loader {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: var(--spacing-margin) 0;
+  padding: 2rem;
+  background: var(--color-white);
+  color: var(--color-black);
+
+  & .message {
+    font-weight: bold;
+    font-size: 2.5rem;
+    margin-top: 2rem;
+    padding: 0;
+    text-align: center;
+  }
+
+  & svg {
+    display: block;
+    transform: scaleZ(1); /* Move to separate render layer in Chrome */
+    width: 4rem;
+    height: 4rem;
+    stroke: var(--color-black);
+    animation: loader-spin 1s steps(8) infinite;
+
+    & line:nth-of-type(1) { stroke: color(var(--color-black) alpha(0.75)); }
+    & line:nth-of-type(3) { stroke: color(var(--color-black) alpha(0.50)); }
+    & line:nth-of-type(5) { stroke: color(var(--color-black) alpha(0.25)); }
+    & line:nth-of-type(7) { stroke: color(var(--color-black) alpha(0)); }
+  }
+}
+
+@keyframes loader-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/components/Loader/test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Loader from 'components/Loader';
+
+describe('Loader', () => {
+  test('rendering', () => {
+    // Using full rendering here since styles for this depend on the structure
+    // of the SVG.
+    const component = mount(
+      <Loader />
+    );
+    expect(component).toMatchSnapshot();
+  });
+});