Removed the react-lottie library and replaced with the new lottie-react lib (#16)

Removed the react-lottie library and replaced with the new lottie-react library

Author: jazzgrewal

frontend/package-lock.json

@@ -14,9 +14,9 @@
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.1",
     "aws-amplify": "^5.2.5",
+    "lottie-react": "^2.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-lottie": "^1.2.3",
     "react-redux": "^8.1.0",
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",

frontend/package.json

@@ -4,11 +4,16 @@ import { Button, Toggle, ToastNotification, InlineNotification } from "@carbon/r
 import { Login } from '@carbon/icons-react';
 import { signIn } from "../../services/AuthService";
 import './Landing.scss';
-import LottieLoader from "../../components/LottieLoader";
+import { useLottie } from "lottie-react";
 import silvaLottie from "../../assets/lotties/silva-logo-lottie-1.json"
 
 const Landing: React.FC = () => {
-
+    // Adding the Lottie Loader and loading the View for lottie with initial options
+    const options = {
+      animationData: silvaLottie,
+      loop: true
+    };
+    const { View } = useLottie(options);
     return (
       <>
         <div className="container-fluid">
@@ -90,7 +95,7 @@ const Landing: React.FC = () => {
             </div>
             <div className="col-lg-5">
               <div className="lottie-container">
-                <LottieLoader animationData={silvaLottie}/>
+                {View}
               </div>
             </div>
           </div>