fix(react-spring-raf): update react-spring deps to resolve raf overlo…

…ad (#2282) * fix(react-spring-raf): update react-spring deps to resolve raf overload * fix(react-spring-raf): changeset * fix(animation-tests): prevent animations from delay and looping * chore(skeleton-loader): remove react spring, replace with bezier timed css animation * chore(react-spring-raf): update changeset files * fix(netlify): add paste-core changes as a build deploy trigger * chore(skeleton-loader): use bg token, add transform, update test and story params * chore(skeleton-loader): update test Co-authored-by: Andrea <andreareneeo@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
twilio-labs · Apr 29, 2022 · 322400c · 322400c
1 parent 9a1d69b
commit 322400c
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 87 deletions.
diff --git a/.changeset/four-hornets-attack.md b/.changeset/four-hornets-attack.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/skeleton-loader': patch
+'@twilio-paste/core': patch
+---
+
+[Skeleton Loader] Update Spring animation to CSS animation
diff --git a/.changeset/sour-seas-fold.md b/.changeset/sour-seas-fold.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/animation-library': patch
+'@twilio-paste/core': patch
+---
+
+[Animation Library] Updates React Spring dependencies to resolve bug with RequestAnimationFrame calls
diff --git a/netlify.toml b/netlify.toml
@@ -4,8 +4,7 @@
   framework = "#custom"
 
 [context.deploy-preview]
-  # only do a preview deply when there is a website change
-  ignore = "git diff --quiet main...HEAD -- packages/paste-website packages/paste-theme-designer ':!packages/**/__tests__/*' ':!packages/paste-website/stories'"
+  ignore = "git diff --quiet main...HEAD -- packages/paste-core packages/paste-website packages/paste-theme-designer ':!packages/**/__tests__/*' ':!packages/paste-website/stories'"
 
 [context.deploy-preview.environment]
   GATSBY_ENVIRONMENT_CONTEXT = "deploy-preview"

diff --git a/packages/paste-core/components/skeleton-loader/src/index.tsx b/packages/paste-core/components/skeleton-loader/src/index.tsx
@@ -1,31 +1,29 @@
 import * as React from 'react';
-import {useSpring, animated} from '@twilio-paste/animation-library';
-import {css, styled} from '@twilio-paste/styling-library';
+import {styled, themeGet} from '@twilio-paste/styling-library';
 import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
 import type {BoxElementProps} from '@twilio-paste/box';
 import type {LayoutProps, BorderRadiusProps} from '@twilio-paste/style-props';
+import {SkeletonLoaderKeyframes} from './keyframes';
 
-const AnimatedSkeleton = animated(Box);
-
-const StyledAnimatedSkeleton = styled(AnimatedSkeleton)(() =>
-  css({
-    background: `linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0.4) 60%, transparent)`,
-    transform: `translateX(-100%) skew(155deg)`,
-  })
-);
-
-const animatedConfig = {
-  loop: {delay: 700, reset: true},
-  from: {translateX: '-100%', skew: '155deg'},
-  // 105% because at 100% with this skew the highlight remains visible
-  // on the bottom right of the loader at the end state.
-  to: {translateX: '105%', skew: '155deg'},
-  config: {
-    mass: 0.1,
-    tension: 80,
-    friction: 50,
-  },
-};
+const SkeletonLoaderInner = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    ${themeGet('backgroundColors.colorBackground')} 40%,
+    ${themeGet('backgroundColors.colorBackground')} 60%,
+    transparent
+  );
+  transform: translateX(-100%) skew(155deg);
+  animation-timing-function: cubic-bezier(0.06, 0.42, 0.57, 0.89);
+  animation-name: ${SkeletonLoaderKeyframes};
+  animation-duration: 4.5s;
+  animation-iteration-count: infinite;
+`;
 
 export interface SkeletonLoaderProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -54,8 +52,6 @@ const SkeletonLoader = React.forwardRef<HTMLDivElement, SkeletonLoaderProps>(
     },
     ref
   ) => {
-    const animatedSkeletonStyles = useSpring(animatedConfig);
-
     return (
       <Box
         {...safelySpreadBoxProps(props)}
@@ -81,14 +77,7 @@ const SkeletonLoader = React.forwardRef<HTMLDivElement, SkeletonLoaderProps>(
         width={width}
         ref={ref}
       >
-        <StyledAnimatedSkeleton
-          bottom={0}
-          left={0}
-          position="absolute"
-          right={0}
-          top={0}
-          style={animatedSkeletonStyles}
-        />
+        <SkeletonLoaderInner />
       </Box>
     );
   }

diff --git a/packages/paste-core/components/skeleton-loader/src/keyframes.tsx b/packages/paste-core/components/skeleton-loader/src/keyframes.tsx
@@ -0,0 +1,11 @@
+import {keyframes} from '@twilio-paste/styling-library';
+
+export const SkeletonLoaderKeyframes = keyframes`
+  0% {
+    transform: translateX(-100%) skew(155deg);
+  }
+  50%,
+  100% {
+    transform: translateX(100%) skew(155deg);
+  }
+`;
diff --git a/packages/paste-core/components/skeleton-loader/stories/index.stories.tsx b/packages/paste-core/components/skeleton-loader/stories/index.stories.tsx
@@ -351,8 +351,3 @@ export const CustomizedSkeletonLoader = (): React.ReactNode => {
     </CustomizationProvider>
   );
 };
-
-CustomizedSkeletonLoader.parameters = {
-  // Sets the delay for a specific story.
-  chromatic: {delay: 3000},
-};
diff --git a/packages/paste-libraries/animation/package.json b/packages/paste-libraries/animation/package.json
@@ -25,8 +25,8 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@react-spring/shared": "9.1.2",
-    "@react-spring/web": "9.1.2"
+    "@react-spring/shared": "9.4.3",
+    "@react-spring/web": "9.4.3"
   },
   "peerDependencies": {
     "react": "^16.8.6 || ^17.0.2",

diff --git a/yarn.lock b/yarn.lock
@@ -10147,62 +10147,70 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-spring/animated@npm:~9.1.2":
-  version: 9.1.2
-  resolution: "@react-spring/animated@npm:9.1.2"
+"@react-spring/animated@npm:~9.4.3-beta.0":
+  version: 9.4.3
+  resolution: "@react-spring/animated@npm:9.4.3"
   dependencies:
-    "@react-spring/shared": ~9.1.2
-    "@react-spring/types": ~9.1.2
+    "@react-spring/shared": ~9.4.3-beta.0
+    "@react-spring/types": ~9.4.3-beta.0
   peerDependencies:
-    react: ">=16.8"
-  checksum: 7a8776f352d2c2a430f9c1f0f70e8aa73167cf2ae990c6cc47e90c3e77ce888f095b177f7bb0a20e41afea40365d30ab739504d25ba9bf8642cf2a133641c647
+    react: ^16.8.0  || ^17.0.0
+  checksum: 91c1b8a4def3ae332f99a9d85ea8bc29882bd19e3a99f49ba0e0e0bf6568443dad61ebe82e1431f2df9eb6a2102809c8e4e3d06e01200b586a909de872bcc981
   languageName: node
   linkType: hard
 
-"@react-spring/core@npm:~9.1.2":
-  version: 9.1.2
-  resolution: "@react-spring/core@npm:9.1.2"
+"@react-spring/core@npm:~9.4.3-beta.0":
+  version: 9.4.3
+  resolution: "@react-spring/core@npm:9.4.3"
   dependencies:
-    "@react-spring/animated": ~9.1.2
-    "@react-spring/shared": ~9.1.2
-    "@react-spring/types": ~9.1.2
+    "@react-spring/animated": ~9.4.3-beta.0
+    "@react-spring/rafz": ~9.4.3-beta.0
+    "@react-spring/shared": ~9.4.3-beta.0
+    "@react-spring/types": ~9.4.3-beta.0
   peerDependencies:
-    react: ">=16.8"
-  checksum: d699cd7d70a58fbee17047278ed985fa97dd84d93cd22e6ccff5d7c89312ae95aa1426504c3e204360cf619eae6aeb0f2d67bc5b623fbb9c221aacbb67736da3
+    react: ^16.8.0  || ^17.0.0
+  checksum: d07be80502cdf7ad42b1bc3fc57870521658a767abcdff094d5c8571431a1b35f0060493d2cbdf00dcc49390088b5d4bad26f10139e4c3ced36b800395d179ee
   languageName: node
   linkType: hard
 
-"@react-spring/shared@npm:9.1.2, @react-spring/shared@npm:~9.1.2":
-  version: 9.1.2
-  resolution: "@react-spring/shared@npm:9.1.2"
+"@react-spring/rafz@npm:~9.4.3-beta.0":
+  version: 9.4.3
+  resolution: "@react-spring/rafz@npm:9.4.3"
+  checksum: b9a454941d5e47e73c83ef71db7f9acef2c1702e528453f0df64426c33d07b569a8789061afff19ba46ee5bc3c0ac69a5710003a2119f404a44638dc09ccf111
+  languageName: node
+  linkType: hard
+
+"@react-spring/shared@npm:9.4.3, @react-spring/shared@npm:~9.4.3-beta.0":
+  version: 9.4.3
+  resolution: "@react-spring/shared@npm:9.4.3"
   dependencies:
-    "@react-spring/types": ~9.1.2
-    rafz: ^0.1.14
+    "@react-spring/rafz": ~9.4.3-beta.0
+    "@react-spring/types": ~9.4.3-beta.0
   peerDependencies:
-    react: ">=16.8"
-  checksum: c90b60417ff5bb37f912e9b6e3a57b751ed7cce012057c4e8d9e8e04393a17eb5d5a2db2ecd21d7e4abd9b2f40f26d13b98d9340974bbfcffff6595026cc112f
+    react: ^16.8.0  || ^17.0.0
+  checksum: 436bb60c0662c6b6ccb850aa455cd8ccc227cdf5d79a0db80c4eab2d404fd07ad362a47d63c39d0bde7789b4fb672ea5817739d5972942fcdb8a54053f3c5e26
   languageName: node
   linkType: hard
 
-"@react-spring/types@npm:~9.1.2":
-  version: 9.1.2
-  resolution: "@react-spring/types@npm:9.1.2"
-  checksum: d0f055b319a83e07f548fbb60e9a9de4d1490d51ccd63cf075d304cf04f2762db786ba93c9d861b0463e5cc5065457ea9129bdd8b08a1c9d470334c4adf61013
+"@react-spring/types@npm:~9.4.3-beta.0":
+  version: 9.4.3
+  resolution: "@react-spring/types@npm:9.4.3"
+  checksum: e42f4ca1fce80b73ae157a3cbff7d5c7c4ca94139439fd8a841821e36d28b7f0927b33e528982d998a29a4ae1b93bca6fd9658f92acf584cb24ac230aad6cf64
   languageName: node
   linkType: hard
 
-"@react-spring/web@npm:9.1.2":
-  version: 9.1.2
-  resolution: "@react-spring/web@npm:9.1.2"
+"@react-spring/web@npm:9.4.3":
+  version: 9.4.3
+  resolution: "@react-spring/web@npm:9.4.3"
   dependencies:
-    "@react-spring/animated": ~9.1.2
-    "@react-spring/core": ~9.1.2
-    "@react-spring/shared": ~9.1.2
-    "@react-spring/types": ~9.1.2
+    "@react-spring/animated": ~9.4.3-beta.0
+    "@react-spring/core": ~9.4.3-beta.0
+    "@react-spring/shared": ~9.4.3-beta.0
+    "@react-spring/types": ~9.4.3-beta.0
   peerDependencies:
-    react: ">=16.8"
-    react-dom: ">=16.8"
-  checksum: ee972d7f92b73e279b27b28b3248679fa164a80f1297432ebfa10d6cdb80c742b3874b6854f19cb0bceb4c9a6e728f5a8853ad9a7f45596e0d552125473e6cb4
+    react: ^16.8.0  || ^17.0.0
+    react-dom: ^16.8.0  || ^17.0.0
+  checksum: 786040a8b139bd7ad3cd7eda113de05dd1de18c2f02f4495c63fc21dffb9d33b07e93c94d6243cc774cf59dc1002062aba8d7677e4c02fab24c937ed7083b2a9
   languageName: node
   linkType: hard
 
@@ -12390,8 +12398,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@twilio-paste/animation-library@workspace:packages/paste-libraries/animation"
   dependencies:
-    "@react-spring/shared": 9.1.2
-    "@react-spring/web": 9.1.2
+    "@react-spring/shared": 9.4.3
+    "@react-spring/web": 9.4.3
     react: ^17.0.2
     react-dom: ^17.0.2
   peerDependencies:
@@ -43242,13 +43250,6 @@ is-whitespace@latest:
   languageName: node
   linkType: hard
 
-"rafz@npm:^0.1.14":
-  version: 0.1.14
-  resolution: "rafz@npm:0.1.14"
-  checksum: 6ee25182e2041a33aa315dc60fda7737407a19aa476fd5accb480a2119497b125e32ff02e6fc31d00a9896702088fbc17073adf41e2e692f011786e58117733c
-  languageName: node
-  linkType: hard
-
 "ramda@npm:0.21.0, ramda@npm:^0.21.0":
   version: 0.21.0
   resolution: "ramda@npm:0.21.0"