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

.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

.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

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"

packages/paste-core/components/skeleton-loader/__tests__/index.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import {render, screen} from '@testing-library/react';
+import {render, screen, waitFor} from '@testing-library/react';
 import {CustomizationProvider} from '@twilio-paste/customization';
 // @ts-ignore typescript doesn't like js imports
 import axe from '../../../../../.jest/axe-helper';
@@ -118,8 +118,10 @@ describe('SkeletonLoader', () => {
   describe('Accessibility', () => {
     it('Should have no accessibility violations', async () => {
       const {container} = render(<SkeletonLoader />);
+
       const results = await axe(container);
-      expect(results).toHaveNoViolations();
+
+      await waitFor(async () => expect(await results).toHaveNoViolations());
     });
   });
 });

packages/paste-core/components/skeleton-loader/src/index.tsx

@@ -1,32 +1,23 @@
 import * as React from 'react';
-import {useSpring, animated} from '@twilio-paste/animation-library';
-import {css, styled} from '@twilio-paste/styling-library';
+import {styled} 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, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0.4) 60%, transparent)',
+  animationTimingFunction: 'cubic-bezier(.06,.42,.57,.89)',
+  animationName: SkeletonLoaderKeyframes,
+  animationDuration: '4.5s',
+  animationIterationCount: 'infinite',
+});
 export interface SkeletonLoaderProps
   extends React.HTMLAttributes<HTMLDivElement>,
     Pick<BoxElementProps, 'element'>,
@@ -54,8 +45,6 @@ const SkeletonLoader = React.forwardRef<HTMLDivElement, SkeletonLoaderProps>(
     },
     ref
   ) => {
-    const animatedSkeletonStyles = useSpring(animatedConfig);
-
     return (
       <Box
         {...safelySpreadBoxProps(props)}
@@ -81,14 +70,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>
     );
   }

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);
+  }
+`;

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",

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"