Fix enableAnimation regression

Author: srmagura

src/Skeleton.tsx

@@ -23,7 +23,7 @@ function styleOptionsToCssProperties({
 
     if (direction === 'rtl') style['--animation-direction'] = 'reverse'
     if (typeof duration === 'number') style['--animation-duration'] = `${duration}s`
-    if (!enableAnimation) style.backgroundImage = 'none'
+    if (!enableAnimation) style['--pseudo-element-display'] = 'none'
 
     if (typeof width === 'string' || typeof width === 'number') style.width = width
     if (typeof height === 'string' || typeof height === 'number') style.height = height

src/__tests__/Skeleton.test.tsx

@@ -78,15 +78,15 @@ it('adds a line break when inline is false', () => {
 
 it('disables the animation if and only if enableAnimation is false', () => {
     const { rerender } = render(<Skeleton containerTestId="container" />)
-    expect(getSkeleton()).toHaveStyle({ backgroundImage: /linear-gradient/ })
+    expect(getSkeleton().style.getPropertyValue('--pseudo-element-display')).toBe('')
     expect(screen.getByTestId('container')).toHaveAttribute('aria-busy', 'true')
 
     rerender(<Skeleton enableAnimation containerTestId="container" />)
-    expect(getSkeleton()).toHaveStyle({ backgroundImage: /linear-gradient/ })
+    expect(getSkeleton().style.getPropertyValue('--pseudo-element-display')).toBe('')
     expect(screen.getByTestId('container')).toHaveAttribute('aria-busy', 'true')
 
     rerender(<Skeleton enableAnimation={false} containerTestId="container" />)
-    expect(getSkeleton()).toHaveStyle({ backgroundImage: 'none' })
+    expect(getSkeleton().style.getPropertyValue('--pseudo-element-display')).toBe('none')
     expect(screen.getByTestId('container')).toHaveAttribute('aria-busy', 'false')
 })
 

src/skeleton.css

@@ -9,6 +9,7 @@
     --highlight-color: #f5f5f5;
     --animation-duration: 1.5s;
     --animation-direction: normal;
+    --pseudo-element-display: block; /* Enable animation */
 
     background-color: var(--base-color);
 
@@ -24,7 +25,7 @@
 
 .react-loading-skeleton::after {
     content: ' ';
-    display: block;
+    display: var(--pseudo-element-display);
     position: absolute;
     left: 0;
     right: 0;