From 1ebd7351df3a324d9789dbd282cac2414bbcd268 Mon Sep 17 00:00:00 2001
From: Jade Pennig <jade@pennig.name>
Date: Thu, 21 Apr 2022 16:33:33 -0500
Subject: [PATCH] chore(skeleton-loader): remove react spring, replace with
 bezier timed css animation

---
 .../skeleton-loader/__tests__/index.spec.tsx  | 18 -------
 .../components/skeleton-loader/src/index.tsx  | 50 ++++++-------------
 .../skeleton-loader/src/keyframes.tsx         | 11 ++++
 3 files changed, 27 insertions(+), 52 deletions(-)
 create mode 100644 packages/paste-core/components/skeleton-loader/src/keyframes.tsx

diff --git a/packages/paste-core/components/skeleton-loader/__tests__/index.spec.tsx b/packages/paste-core/components/skeleton-loader/__tests__/index.spec.tsx
index fa0871d61e..18fd6ab88d 100644
--- 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
index c0c7ae16dc..3be8c3e337 100644
--- 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
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);
+  }
+`;