chore(lottie): migrate to lottie-react library (#1084)

The original react-lottie library seems to be abandoned and still uses
deprecated React lifecycle methods [1]. These methods will be removed in
React 17.

Hence, migrate to lottie-react instead, which fixes the issue and is
expected to have React 17 support [2].

[1]: chenqingspring/react-lottie#119
[2]: Gamote/lottie-react#29

frontend/package.json

@@ -20,7 +20,6 @@
  "@sentry/browser": "^5.27.6",
  "@types/bcryptjs": "^2.4.2",
  "@types/papaparse": "^5.0.3",
- "@types/react-lottie": "^1.2.5",
  "@types/validator": "^13.0.0",
  "axios": "^0.21.1",
  "boxicons": "^2.0.5",
@@ -32,6 +31,7 @@
  "escape-html": "^1.0.3",
  "html-to-draftjs": "^1.5.0",
  "lodash": "^4.17.21",
+ "lottie-react": "^2.1.0",
  "moment": "^2.24.0",
  "papaparse": "^5.2.0",
  "postman-templating": "file:../modules/postman-templating",
@@ -40,7 +40,6 @@
  "react-dom": "^16.13.1",
  "react-draft-wysiwyg": "^1.14.5",
  "react-ga": "^2.7.0",
- "react-lottie": "^1.2.3",
  "react-moment": "^0.9.7",
  "react-paginate": "^6.3.2",
  "react-player": "^2.6.2",

frontend/src/components/landing/Landing.tsx

@@ -2,7 +2,7 @@ import React, { useState, useContext, useEffect } from 'react'
 import { Redirect, useHistory } from 'react-router-dom'
 import { OutboundLink } from 'react-ga'
 import cx from 'classnames'
-import Lottie from 'react-lottie'
+import Lottie from 'lottie-react'
 
 import { LINKS, INFO_BANNER } from 'config'
 
@@ -187,13 +187,11 @@ const Landing = () => {
  <img src={landingHeroImg} className={styles.landingHero} alt="" />
  ) : (
  <Lottie
- options={{
- loop: false,
- autoplay: true,
- animationData: landingAnimation,
- rendererSettings: {
- preserveAspectRatio: 'xMidYMid slice',
- },
+ loop={false}
+ autoplay={true}
+ animationData={landingAnimation}
+ rendererSettings={{
+ preserveAspectRatio: 'xMidYMid slice',
  }}
  />
  )}