Animations playground lottie (#855)

* animations

* test

* clean up

* cr

* fix build types..

* Improved animations

* no more prettier for animations

.prettierignore

@@ -7,3 +7,6 @@ tsconfig.json
 public/mockServiceWorker.js
 .history
 docs/
+
+# Ignore animations as they become huge
+src/shared/animations

package.json

@@ -81,6 +81,7 @@
     "react-dropzone": "^11.3.1",
     "react-hook-form": "^7.8.1",
     "react-intersection-observer": "^8.31.0",
+    "react-lottie-player": "^1.3.2",
     "react-number-format": "^4.4.4",
     "react-router": "^6.0.0-beta.0",
     "react-router-dom": "^6.0.0-beta.0",

src/shared/animations/loader-S.json

@@ -0,0 +1 @@
+{"v":"5.6.7","fr":60,"ip":0,"op":60,"w":24,"h":24,"nm":"Loader S","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Loader","sr":1,"ks":{"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":59,"s":[360]}]},"p":{"a":0,"k":[12,12,0]},"s":{"a":0,"k":[50,50,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[36,36]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.250980407,0.219607844949,1,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":4},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tm","s":{"a":0,"k":0},"e":{"a":0,"k":65},"o":{"a":0,"k":0},"m":1,"nm":"Trim Paths 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Blue","bm":0,"hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[36,36]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.709803921569,0.756862745098,0.788235294118,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":4},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tm","s":{"a":0,"k":65},"e":{"a":0,"k":100},"o":{"a":0,"k":0},"m":1,"nm":"Trim Paths 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Gray","bm":0,"hd":false}],"ip":0,"op":60,"st":0,"bm":0}],"markers":[]}

src/shared/animations/loader-XS.json

@@ -0,0 +1 @@
+{"v":"5.6.7","fr":60,"ip":0,"op":60,"w":16,"h":16,"nm":"Loader XS","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Loader","sr":1,"ks":{"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":59,"s":[360]}]},"p":{"a":0,"k":[8,8,0]},"s":{"a":0,"k":[50,50,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[24,24]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.250980407,0.219607844949,1,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":4},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tm","s":{"a":0,"k":0},"e":{"a":0,"k":65},"o":{"a":0,"k":0},"m":1,"nm":"Trim Paths 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Blue","bm":0,"hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[24,24]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.709803921569,0.756862745098,0.788235294118,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":4},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tm","s":{"a":0,"k":65},"e":{"a":0,"k":100},"o":{"a":0,"k":0},"m":1,"nm":"Trim Paths 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Gray","bm":0,"hd":false}],"ip":0,"op":60,"st":0,"bm":0}],"markers":[]}

src/views/playground/PlaygroundLayout.tsx

@@ -7,6 +7,7 @@ import { ActiveUserProvider, ConnectionStatusManager, DialogProvider } from '@/p
 import { colors } from '@/shared/theme'
 
 import {
+  Animations,
   AutomaticCrop,
   Dialogs,
   FileHashing,
@@ -21,6 +22,7 @@ import {
 } from './Playgrounds'
 
 const playgroundRoutes = [
+  { path: 'animations', element: <Animations />, name: 'Animations' },
   { path: 'validation-form', element: <PlaygroundValidationForm />, name: 'Validation Form' },
   { path: 'drafts', element: <PlaygroundDrafts />, name: 'Drafts' },
   { path: 'video-metadata', element: <VideoMetaData />, name: 'Video Metadata' },
@@ -78,6 +80,7 @@ const NavContainer = styled.div`
 `
 
 const ContentContainer = styled.div`
+  width: 100%;
   display: flex;
   flex-direction: column;
   padding-left: 30px;

src/views/playground/Playgrounds/Animations.tsx

@@ -0,0 +1,41 @@
+import styled from '@emotion/styled'
+import loadable from '@loadable/component'
+import React, { useEffect, useState } from 'react'
+
+const LoadableLottie = loadable(() => import('react-lottie-player'), {
+  fallback: <>LOADING LOTTIE</>,
+})
+export const Animations = () => {
+  const [XL, setXL] = useState<object | undefined>()
+  const [L, setL] = useState<object | undefined>()
+  const [M, setM] = useState<object | undefined>()
+  const [S, setS] = useState<object | undefined>()
+  const [XS, setXS] = useState<object | undefined>()
+
+  useEffect(() => {
+    import('@/shared/animations/loader-XL.json').then((loader) => setXL(loader.default))
+    import('@/shared/animations/loader-L.json').then((loader) => setL(loader.default))
+    import('@/shared/animations/loader-M.json').then((loader) => setM(loader.default))
+    import('@/shared/animations/loader-S.json').then((loader) => setS(loader.default))
+    import('@/shared/animations/loader-XS.json').then((loader) => setXS(loader.default))
+  }, [])
+
+  return (
+    <Container>
+      ANIMATIONS
+      <LoadableLottie loop play animationData={XL} />
+      <LoadableLottie loop play animationData={L} />
+      <LoadableLottie loop play animationData={M} />
+      <LoadableLottie loop play animationData={S} />
+      <LoadableLottie loop play animationData={XS} />
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  display: grid;
+  grid-gap: 32px;
+  justify-content: center;
+  text-align: center;
+  grid-template-rows: auto 1fr 1fr 64px 32px 48px 48px;
+`

src/views/playground/Playgrounds/index.ts

@@ -9,3 +9,4 @@ export * from './PlaygroundValidationForm'
 export * from './UploadFiles'
 export * from './VideoMetaData'
 export * from './PlaygroundCommonStore'
+export * from './Animations'

yarn.lock

@@ -14541,6 +14541,11 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lottie-web@^5.7.6:
+  version "5.7.11"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.7.11.tgz#4ba74e8a629f76d3c0a0062ddc37d2b96e13765c"
+  integrity sha512-Jvz3PQqwrDj1rXGqfeQtipH/WNtM/Y4l8t8NIQXe1xUI0nVooH2bTYJGef0UkdBcWUx1s3miKsRhyP196g9tvQ==
+
 lower-case@2.0.1, lower-case@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.1.tgz#39eeb36e396115cc05e29422eaea9e692c9408c7"
@@ -17802,6 +17807,15 @@ 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-player@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/react-lottie-player/-/react-lottie-player-1.3.2.tgz#1424aec0b3a14f343b8dbe054709e2c9d5a5c8fb"
+  integrity sha512-kREeIztLgrkDqpwnJpqJobxQ9nZmduVQvdBJRVj7O10sL1B8cmLMVUa1gj1CxDBjHx+XC2FxPD4w3qey8bPPNQ==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    lodash.clonedeep "^4.5.0"
+    lottie-web "^5.7.6"
+
 react-number-format@^4.4.4:
   version "4.4.4"
   resolved "https://registry.yarnpkg.com/react-number-format/-/react-number-format-4.4.4.tgz#2a7f50be404f990ec15855cc6babfeae1be16351"