Add loader

frontend/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

frontend/package.json

@@ -10,9 +10,11 @@
     "axios": "^0.21.1",
     "node-sass": "^4.14.1",
     "react": "^16.13.1",
+    "react-awesome-loaders": "^0.1.37",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.3"
+    "react-scripts": "^4.0.3",
+    "webpack-dev-server": "^3.11.2"
   },
   "scripts": {
     "start": "react-scripts start",

frontend/src/App.js

@@ -1,6 +1,5 @@
-import React from "react";
+import React , {useState,useEffect} from "react";
 import { BrowserRouter as Router, Switch } from "react-router-dom";
-
 // css
 import "./css/main.scss";
 
@@ -24,8 +23,29 @@ import { CodeOfConduct } from "./pages/CodeOfConduct/index";
 // images
 import avatar_image from "./images/placeholder-images/avatar.png";
 
+
+// //Loader
+ import Loader from "./components/Loader/Loader"
+
+
 function App() {
+  let [loading, setLoading] = useState(false);
+
+  useEffect(()=>{
+    setLoading(true)
+    setTimeout(()=>{
+      setLoading(false)
+    },2000)
+  },[])
+
+
   return (
+     <>
+     {
+       loading?
+        <Loader />
+       :
+
     <Router>
       <Header isSignedIn={false} avatarSrc={avatar_image} />
       <Switch>
@@ -40,9 +60,10 @@ function App() {
         <BlogPage path="/stories/post" exact />
         <ProjectListing path="/projects" exact />
       </Switch>
-
       <Footer />
     </Router>
+}
+    </>
   );
 }
 

frontend/src/components/Loader/Loader.js

@@ -0,0 +1,16 @@
+import React from "react";
+import localclasses from "./Loader.module.css";
+import { ThreeDLoader  } from "react-awesome-loaders";
+function Loader() {
+  return (
+    <div className={localclasses.load}>
+      <ThreeDLoader
+        colorRing1={"#99004d"}
+        colorRing2={"#000000"}
+        desktopSize={"100px"}
+        mobileSize={"64px"}
+      />
+    </div>
+  );
+}
+export default Loader;

frontend/src/components/Loader/Loader.module.css

@@ -0,0 +1,9 @@
+.load {
+  background-color: white;
+  text-align: center;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}