chore(skeleton-loader): remove react spring, replace with bezier time…

…d css animation
twilio-labs · Apr 21, 2022 · 1ebd735 · 1ebd735
1 parent 519c0d5
commit 1ebd735
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 52 deletions.
diff --git a/packages/paste-core/components/skeleton-loader/__tests__/index.spec.tsx b/packages/paste-core/components/skeleton-loader/__tests__/index.spec.tsx
@@ -7,24 +7,6 @@ import axe from '../../../../../.jest/axe-helper';
 import {SkeletonLoader} from '../src';
 import {Default} from '../stories/index.stories';
 
-jest.mock('@twilio-paste/animation-library', () => {
-  const {animated, useSpring, ...rest} = jest.requireActual('@twilio-paste/animation-library');
-  return {
-    ...rest,
-    useSpring: (config) => {
-      // set delay to 0 and do not loop the animation --> prevent effects from holding up test.
-      return useSpring({
-        ...config,
-        loop: {
-          delay: 0,
-          reset: false,
-        },
-      });
-    },
-    animated,
-  };
-});
-
 describe('SkeletonLoader', () => {
   it('should render', () => {
     render(<Default />);

diff --git a/packages/paste-core/components/skeleton-loader/src/index.tsx b/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>
     );
   }

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