Merge pull request #25 from larryschirmer/add-loading-modal

Add loading modal

src/App.css

@@ -2,10 +2,6 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-}
-
 .App-header {
   background-color: #282c34;
   min-height: 70px;

src/App.js

@@ -2,7 +2,8 @@ import React, { Component } from "react";
 import "./App.css";
 import EpisodeList from "./components/EpisodeList";
 import UserForm from "./components/UserForm";
-import logo from "./logo.svg";
+import LoadingStatus from "./components/LoadingStatus";
+
 import {
   Button,
   Dialog,
@@ -98,13 +99,7 @@ class App extends Component {
           onClick={() => this.setState({ fetching: true })}
         />
         {this.state.error ? this.renderAlert() : <div />}
-        {!this.state.fetching ? (
-          <p>Please enter an RSS feed</p>
-        ) : (
-          <div>
-            <img src={logo} className="App-logo" alt="App Logo" />
-          </div>
-        )}
+        <LoadingStatus fetching={this.state.fetching} />
         <EpisodeList
           episodes={this.state.episodes}
           program_title={this.state.program_title}

src/components/LoadingStatus.jsx

@@ -0,0 +1,54 @@
+import React from "react";
+
+import logo from "../logo.svg";
+
+const LoadingStatus = ({ fetching }) => {
+  const styles = {
+    statusContainer: {
+      height: "50px",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    modalContainer: {
+      width: "100vw",
+      height: "100vh",
+      background: "rgba(0, 0, 0, 0.25)",
+      position: "fixed",
+      top: 0,
+      left: 0,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      zIndex: 1
+    },
+    modal: {
+      width: "250px",
+      height: "200px",
+      background: "white",
+      borderRadius: "4px",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    statusText: {
+      margin: 0
+    }
+  };
+
+  return (
+    <div style={styles.statusContainer}>
+      {fetching ? (
+        <div style={styles.modalContainer}>
+          <div style={styles.modal}>
+            <img src={logo} alt="loading animation" />
+          </div>
+        </div>
+      ) : (
+        <p style={styles.statusText}>Please enter an RSS feed</p>
+      )}
+    </div>
+  );
+};
+
+export default LoadingStatus;