Add new loading animation

Author: vallezw

frontend/package.json

@@ -15,7 +15,6 @@
     "react-dropzone": "^11.3.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
-    "react-spinners": "^0.10.6",
     "sass": "^1.32.8",
     "sweetalert2": "^10.15.6",
     "web-vitals": "^1.1.0"

frontend/public/index.html

@@ -25,6 +25,7 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <script src="sweetalert2/dist/sweetalert2.min.js"></script>
     <script src="%PUBLIC_URL%/env-config.js"></script>
+    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
 
     <div id="root"></div>
   </body>

frontend/src/App.css

@@ -6,12 +6,11 @@
 }
 
 .loading {
-  margin-top: 40vh;
+  margin-top: 20vh;
   display: block;
   margin-left: auto;
   margin-right: auto;
-  width: 0%;
-
+  width: 43%;
 }
 
 body {

frontend/src/Components/ComponentUtils/Loading.js

@@ -1,15 +1,11 @@
-import { HashLoader } from 'react-spinners';
-
 import '../../App.css'
 
 
 export default function Loading() {
     return (
       <div className="loading">
-        <HashLoader
-          color={'#fff'}
-          size={100}
-        />
+        <lottie-player src="https://assets7.lottiefiles.com/datafiles/9jPPC5ogUyD6oQq/data.json"  background="transparent"  speed="1"  style={{width: "500px", height: "500px"}} loop  autoplay></lottie-player>
+
       </div>
     )
 }