Merge pull request #56 from marizvi/master

Preloader Added

package.json

@@ -4,20 +4,21 @@
   "private": true,
   "homepage": "https://algos-web.netlify.com",
   "dependencies": {
+    "@emotion/react": "^11.4.1",
     "axios": "^0.21.2",
     "react": "^16.14.0",
     "react-dom": "^16.13.1",
     "react-particles-js": "^3.5.3",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3",
+    "react-scripts": "^3.4.4",
+    "react-spinners": "^0.11.0",
     "react-springy-parallax": "^1.3.0",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0",
     "script": "^0.1.4",
-    "tsparticles": "^1.35.2",
-    "uikit": "^3.5.7"
+    "tsparticles": "^1.35.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/Main.css

@@ -0,0 +1,9 @@
+.App {
+  text-align: center;
+  background-color: rgb(16, 29, 68);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+}

src/Main.js

@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from 'react';
+import { Switch, Route } from 'react-router-dom';
+import HomePage from './components/home/HomePage';
+import HomeComponent from './components/welcome/HomeComponent.js';
+import HashLoader from 'react-spinners/HashLoader';
+import './Main.css';
+
+function App() {
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+    }, 2410);
+  }, []);
+
+  return (
+    <div className="App">
+      {loading ? (
+        <div className="loadd">
+          <HashLoader color={'white'} loading={loading} size={60} />
+        </div>
+      ) : (
+        <Switch>
+          {/* New PArrellax component */}
+          {/* <Route exact path="/" component={HomePage}></Route> */}
+          <Route exact path="/" component={HomeComponent}></Route>
+          <Route exact path="/home" component={HomePage}></Route>
+        </Switch>
+      )}
+    </div>
+  );
+}
+
+export default App;

src/components/welcome/HomeComponent.css

@@ -42,7 +42,6 @@
 .footer-image {
   opacity: 0.6;
   width: 40%;
-  margin-left: 30%;
 }
 
 .footer-heading {

src/components/welcome/HomeComponent.js

@@ -69,6 +69,8 @@ export default class HomeComponent extends Component {
           </div>
         </Parallax.Layer>
       </Parallax>
+      //   )}
+      // </div>
     );
   }
 }

src/index.js

@@ -1,24 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Route } from 'react-router';
-import { BrowserRouter, Switch } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
+import Main from './Main';
 
 // import * as serviceWorker from './serviceWorker';
 import store from './store';
 import './index.css';
-import HomePage from './components/home/HomePage';
-import HomeComponent from './components/welcome/HomeComponent.js';
 
 ReactDOM.render(
   <Provider store={store}>
     <BrowserRouter basename={process.env.PUBLIC_URL}>
-      <Switch>
-        {/* New PArrellax component */}
-        {/* <Route exact path="/" component={HomePage}></Route> */}
-        <Route exact path="/" component={HomeComponent}></Route>
-        <Route exact path="/home" component={HomePage}></Route>
-      </Switch>
+      <Main />
     </BrowserRouter>
   </Provider>,
   document.getElementById('root')