diff --git a/.changeset/four-hornets-attack.md b/.changeset/four-hornets-attack.md new file mode 100644 index 0000000000..aa01b98136 --- /dev/null +++ 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 new file mode 100644 index 0000000000..3ed0165d26 --- /dev/null +++ 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 index 639a5db973..c1ef27e629 100644 --- 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 index c0c7ae16dc..66f3ec5fc2 100644 --- 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, @@ -54,8 +52,6 @@ const SkeletonLoader = React.forwardRef( }, ref ) => { - const animatedSkeletonStyles = useSpring(animatedConfig); - return ( ( width={width} ref={ref} > - + ); } diff --git a/packages/paste-core/components/skeleton-loader/src/keyframes.tsx b/packages/paste-core/components/skeleton-loader/src/keyframes.tsx new file mode 100644 index 0000000000..ce7d232d86 --- /dev/null +++ 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 index ac97e4f347..e510f94401 100644 --- 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 => { ); }; - -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 index 3ab6d4ffa0..f88a0fc100 100644 --- 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 index b5c40a3372..aa8237e0a9 100644 --- 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"