Initial Commit Rework

frontend/src/Components/Loading/LoadingIndicator.css

@@ -0,0 +1,65 @@
+.loading {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.rippleContainer {
+  position: relative;
+  display: inline-block;
+}
+
+.ripple:nth-child(0) {
+  animation-delay: -0.8s;
+}
+
+.ripple:nth-child(1) {
+  animation-delay: -0.6s;
+}
+
+.ripple:nth-child(2) {
+  animation-delay: -0.4s;
+}
+
+.ripple:nth-child(3) {
+  animation-delay: -0.2s;
+}
+
+.ripple {
+  position: absolute;
+  border: 2px solid #3a3f51;
+  border-radius: 100%;
+  animation-fill-mode: both;
+  animation: rippleContainer 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
+}
+
+@-webkit-keyframes rippleContainer {
+  0% {
+    opacity: 1;
+    transform: scale(0.1);
+  }
+
+  70% {
+    opacity: 0.7;
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes rippleContainer {
+  0% {
+    opacity: 1;
+    transform: scale(0.1);
+  }
+
+  70% {
+    opacity: 0.7;
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

frontend/src/Components/Loading/LoadingIndicator.js

@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styles from './LoadingIndicator.css';
+
+function LoadingIndicator({ className, size }) {
+  const sizeInPx = `${size}px`;
+  const width = sizeInPx;
+  const height = sizeInPx;
+
+  return (
+    <div
+      className={className}
+      style={{ height }}
+    >
+      <div
+        className={styles.rippleContainer}
+        style={{ width, height }}
+      >
+        <div
+          className={styles.ripple}
+          style={{ width, height }}
+        />
+
+        <div
+          className={styles.ripple}
+          style={{ width, height }}
+        />
+
+        <div
+          className={styles.ripple}
+          style={{ width, height }}
+        />
+      </div>
+    </div>
+  );
+}
+
+LoadingIndicator.propTypes = {
+  className: PropTypes.string,
+  size: PropTypes.number
+};
+
+LoadingIndicator.defaultProps = {
+  className: styles.loading,
+  size: 50
+};
+
+export default LoadingIndicator;

frontend/src/Components/Loading/LoadingMessage.css

@@ -0,0 +1,6 @@
+.loadingMessage {
+  margin: 50px 10px 0;
+  text-align: center;
+  font-weight: 300;
+  font-size: 36px;
+}

frontend/src/Components/Loading/LoadingMessage.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import styles from './LoadingMessage.css';
+
+const messages = [
+  'Downloading more RAM',
+  'Now in Technicolor',
+  'Previously on Sonarr...',
+  'Bleep Bloop.',
+  'Locating the required gigapixels to render...',
+  'Spinning up the hamster wheel...',
+  'At least you\'re not on hold',
+  'Hum something loud while others stare',
+  'Loading humorous message... Please Wait',
+  'I could\'ve been faster in Python',
+  'Don\'t forget to rewind your episodes',
+  'Congratulations! you are the 1000th visitor.',
+  'HELP!, I\'m being held hostage and forced to write these stupid lines!',
+  'RE-calibrating the internet...',
+  'I\'ll be here all week',
+  'Don\'t forget to tip your waitress',
+  'Apply directly to the forehead',
+  'Loading Battlestation'
+];
+
+function LoadingMessage() {
+  const index = Math.floor(Math.random() * messages.length);
+  const message = messages[index];
+
+  return (
+    <div className={styles.loadingMessage}>
+      {message}
+    </div>
+  );
+}
+
+export default LoadingMessage;