From 8ed6cbdc746a85b6455d8ea5c5dbc828bb6a7872 Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Tue, 16 Feb 2021 23:41:12 +0100
Subject: [PATCH] upgrade to react-lottie-player

---
 package.json |  2 +-
 src/App.jsx  |  5 ++++-
 yarn.lock    | 20 ++++++++++----------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 45c859db..51ad3763 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,6 @@
     "react-hammerjs": "^1.0.1",
     "react-i18next": "^11.3.3",
     "react-icons": "^4.1.0",
-    "react-lottie": "^1.2.3",
     "react-scripts": "^3.4.0",
     "react-sortable-hoc": "^1.5.3",
     "react-use": "^13.26.1",
@@ -100,6 +99,7 @@
     "mime-types": "^2.1.14",
     "mousetrap": "^1.6.5",
     "open": "^7.0.3",
+    "react-lottie-player": "^1.2.0",
     "react-syntax-highlighter": "^13.0.0",
     "read-chunk": "^2.0.0",
     "semver": "^7.1.3",
diff --git a/src/App.jsx b/src/App.jsx
index 75af9f24..d4b91247 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,7 +2,7 @@ import React, { memo, useEffect, useState, useCallback, useRef, Fragment, useMem
 import { FaVolumeMute, FaVolumeUp, FaAngleLeft, FaWindowClose } from 'react-icons/fa';
 import { AnimatePresence, motion } from 'framer-motion';
 import Swal from 'sweetalert2';
-import Lottie from 'react-lottie';
+import Lottie from 'react-lottie-player';
 import { SideSheet, Button, Position, SegmentedControl, Select } from 'evergreen-ui';
 import { useStateWithHistory } from 'react-use/lib/useStateWithHistory';
 import useDebounceOld from 'react-use/lib/useDebounce'; // Want to phase out this
@@ -2071,6 +2071,9 @@ const App = memo(() => {
               <div style={{ width: 150, height: 150 }}>
                 <Lottie
                   options={{ loop: true, autoplay: true, animationData: loadingLottie }}
+                  loop
+                  animationData={loadingLottie}
+                  play
                   style={{ width: '170%', height: '130%', marginLeft: '-35%', marginTop: '-29%', pointerEvents: 'none' }}
                 />
               </div>
diff --git a/yarn.lock b/yarn.lock
index fc5de927..9cb5211e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8373,10 +8373,10 @@ loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
-lottie-web@^5.1.3:
-  version "5.6.4"
-  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.6.4.tgz#8520f9e7e8daa9e0ab8343c628c3f470800088a4"
-  integrity sha512-eU+21Wo/RSi4i260S7fDUxfhNJ9PhfzUJMVQpip0yZd19oJ18jrNCoSQKVUzjC2TzOjqumlLZXR636ezKoWNQg==
+lottie-web@^5.7.5:
+  version "5.7.6"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.7.6.tgz#f20e5555ff120dc1e07ba53adb40061e822f3c48"
+  integrity sha512-qn/KYMI4QQvFDhtoxs0RPkn9uZKhDB9keE5BKgbJlSRfNEZpRiDlwBE9ibYz4nPhbyE+NUlt8IRIVR7g5OSX3w==
 
 lower-case@^2.0.1:
   version "2.0.1"
@@ -10927,13 +10927,13 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-lottie@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/react-lottie/-/react-lottie-1.2.3.tgz#8544b96939e088658072eea5e12d912cdaa3acc1"
-  integrity sha512-qLCERxUr8M+4mm1LU0Ruxw5Y5Fn/OmYkGfnA+JDM/dZb3oKwVAJCjwnjkj9TMHtzR2U6sMEUD3ZZ1RaHagM7kA==
+react-lottie-player@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/react-lottie-player/-/react-lottie-player-1.2.0.tgz#4d99046664689e19c16d1a14ca34506174e836b8"
+  integrity sha512-rMp4jUhyMZPSxZMfsTNiX0DDZCyZJwoonDZQ1SATI4r/koQ7VXkg8orbQjkwaXf9GMRoO71Vhohdf9wx4FSYGA==
   dependencies:
-    babel-runtime "^6.26.0"
-    lottie-web "^5.1.3"
+    lodash "^4.17.19"
+    lottie-web "^5.7.5"
 
 react-scripts@^3.4.0:
   version "3.4.0"