Add react content loader

Author: PrinceSumberia

package-lock.json

@@ -15,6 +15,7 @@
     "axios": "^0.19.2",
     "classnames": "^2.2.6",
     "react": "^16.13.1",
+    "react-content-loader": "^5.0.4",
     "react-dom": "^16.13.1",
     "react-fade-in": "^1.0.0",
     "react-lottie": "^1.2.3",

package.json

@@ -7,7 +7,6 @@
    min-height: 100vh;
    background-color: #1A1053;
    color: rgba(255, 255, 255, .9);
-   /* color: (props)=> props.isDarkMode ? "rgba(255,255,255,.87)": "rgba(255,255,255,.9)", */
    text-transform: capitalize;
    display: flex;
    justify-content: center;

src/App.css

@@ -42,7 +42,7 @@ class App extends Component {
               />
               <Route exact path="/symptoms" render={() => <h1>symptoms</h1>} />
               <Route exact path="/stay-safe" render={() => <StaySafe />} />
-              <Route exact path="/help" render={() => <Help />} />
+              <Route exact path="/essentials" render={() => <Help />} />
               <Route
                 path="/"
                 render={() => (

src/App.js

@@ -20,7 +20,7 @@ class Form extends Component {
   handleSubmit(e) {
     e.preventDefault();
     this.props.handleQuery(this.state.location);
-    this.setState({ location: "" });
+    this.setState({ location: "" }, this.props.handleLoading);
   }
 
   render() {
@@ -36,7 +36,7 @@ class Form extends Component {
           onChange={this.handleChange}
           required
         />
-        <button className={classes.btn}>Get Help</button>
+        <button className={classes.btn}>Search</button>
       </form>
     );
   }

src/components/Form.js

@@ -6,6 +6,7 @@ import axios from "axios";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 import FadeIn from "react-fade-in";
+import Placeholder from "./Placeholder";
 
 class Help extends Component {
   constructor(props) {
@@ -14,8 +15,10 @@ class Help extends Component {
       query: "",
       data: {},
       currentResources: [],
+      loadingStatus: null,
     };
     this.handleQuery = this.handleQuery.bind(this);
+    this.handleLoading = this.handleLoading.bind(this);
     this.getData = this.getData.bind(this);
   }
 
@@ -50,20 +53,25 @@ class Help extends Component {
     this.setState({ query: query }, this.getData);
   }
 
+  handleLoading() {
+    this.setState({ loadingStatus: "loading" });
+  }
+
   getData() {
     let resources = [];
     for (const key of Object.keys(this.state.data)) {
-      if (key === this.state.query) {
+      if (key.toLowerCase() === this.state.query.toLowerCase()) {
         resources.push({ ...this.state.data[key] });
       } else {
         for (const dist of Object.keys(this.state.data[key])) {
-          if (dist === this.state.query) {
+          if (dist.toLowerCase() === this.state.query.toLowerCase()) {
             resources.push({ [key]: this.state.data[key][dist] });
           }
         }
       }
     }
-    this.setState({ currentResources: resources, isLoading: false });
+    this.setState({ currentResources: resources });
+    setTimeout(() => this.setState({ loadingStatus: "completeLoading" }), 1500);
   }
 
   render() {
@@ -111,9 +119,23 @@ class Help extends Component {
     });
     return (
       <div className={classes.help}>
-        <h1 className={classes.mainHeading}>Help Page</h1>
-        <Form handleQuery={this.handleQuery} />
-        <div className={classes.container}>{res}</div>
+        <h1 className={classes.mainHeading}>
+          Search for Essentials and Services
+        </h1>
+        <Form
+          handleQuery={this.handleQuery}
+          handleLoading={this.handleLoading}
+        />
+        {this.state.loadingStatus === "loading" && (
+          <div className={classes.container}>
+            <Placeholder />
+            <Placeholder />
+            <Placeholder />
+          </div>
+        )}
+        {this.state.loadingStatus === "completeLoading" && (
+          <div className={classes.container}>{res}</div>
+        )}
       </div>
     );
   }

src/components/Help.js

@@ -5,7 +5,7 @@ import {
   faHome,
   faHeadSideCough,
   faFlask,
-  faQuestionCircle,
+  faBox,
 } from "@fortawesome/free-solid-svg-icons";
 import styles from "../styles/NavbarStyles";
 import { NavLink } from "react-router-dom";
@@ -61,16 +61,13 @@ class Navbar extends Component {
           <li className={classes.navItem}>
             <NavLink
               exact
-              to="/help"
+              to="/essentials"
               className={classes.navLinks}
               activeClassName={classes.active}
             >
               <div className={classes.iconBox}>
-                <FontAwesomeIcon
-                  icon={faQuestionCircle}
-                  className={classes.icons}
-                />
-                <p>Help</p>
+                <FontAwesomeIcon icon={faBox} className={classes.icons} />
+                <p>Essentials</p>
               </div>
             </NavLink>
           </li>

src/components/Navbar.js

@@ -0,0 +1,28 @@
+import React from "react";
+import ContentLoader from "react-content-loader";
+
+const MyLoader = () => (
+  <ContentLoader
+    speed={2}
+    width={400}
+    height={160}
+    viewBox="0 0 400 160"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="3" ry="3" width="67" height="11" />
+    <rect x="458" y="13" rx="3" ry="3" width="140" height="11" />
+    <rect x="127" y="48" rx="3" ry="3" width="53" height="11" />
+    <rect x="187" y="48" rx="3" ry="3" width="72" height="11" />
+    <rect x="-5" y="46" rx="3" ry="3" width="100" height="11" />
+    <rect x="-2" y="73" rx="3" ry="3" width="339" height="14" />
+    <rect x="2" y="22" rx="3" ry="3" width="140" height="11" />
+    <rect x="164" y="21" rx="3" ry="3" width="173" height="11" />
+    <rect x="2" y="101" rx="0" ry="0" width="338" height="14" />
+    <rect x="51" y="130" rx="0" ry="0" width="12" height="0" />
+    <rect x="72" y="131" rx="0" ry="0" width="54" height="0" />
+    <rect x="145" y="130" rx="0" ry="0" width="3" height="0" />
+  </ContentLoader>
+);
+
+export default MyLoader;