Fix highlight being shown when !enableAnimation

Also fix an inline style always being rendered even if the props were left at their default values.

Author: srmagura

.eslintrc.cjs

@@ -19,7 +19,6 @@ module.exports = {
         'testing-library/custom-renders': 'off',
     },
     rules: {
-        'no-param-reassign': 'off',
         'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
         'no-restricted-syntax': [
             'error',

src/Skeleton.tsx

@@ -7,6 +7,7 @@ import { SkeletonStyleProps } from './SkeletonStyleProps'
 const defaultBaseColor = '#ebebeb'
 const defaultHighlightColor = '#f5f5f5'
 
+// For performance & cleanliness, don't add any inline styles unless we have to
 function styleOptionsToCssProperties({
     baseColor,
     highlightColor,
@@ -20,9 +21,7 @@ function styleOptionsToCssProperties({
     duration,
     enableAnimation = true,
 }: SkeletonStyleProps & { circle: boolean }): CSSProperties {
-    const style: CSSProperties = {
-        animationDirection: direction === 'rtl' ? 'reverse' : 'normal',
-    }
+    const style: CSSProperties = {}
 
     if (direction === 'rtl') style.animationDirection = 'reverse'
 
@@ -43,19 +42,16 @@ function styleOptionsToCssProperties({
     }
 
     if (typeof baseColor !== 'undefined' || typeof highlightColor !== 'undefined') {
-        baseColor ??= defaultBaseColor
-        highlightColor ??= defaultHighlightColor
-
-        style.backgroundColor = baseColor
+        style.backgroundColor = baseColor ?? defaultBaseColor
         style.backgroundImage = `linear-gradient(
             90deg,
-            ${baseColor},
-            ${highlightColor},
-            ${baseColor}
+            ${baseColor ?? defaultBaseColor},
+            ${highlightColor ?? defaultHighlightColor},
+            ${baseColor ?? defaultBaseColor}
         )`
     }
 
-    if (!enableAnimation) style.animation = 'none'
+    if (!enableAnimation) style.backgroundImage = 'none'
 
     return style
 }

src/__tests__/Skeleton.test.tsx

@@ -10,6 +10,9 @@ it('renders a skeleton', () => {
 
     expect(skeletonElements).toHaveLength(1)
     expect(skeletonElements[0]).toBeVisible()
+
+    // No inline styles should be rendered by default
+    expect(skeletonElements[0]).not.toHaveAttribute('style')
 })
 
 it('renders the required number of skeletons', () => {
@@ -50,13 +53,13 @@ it('ignores borderRadius if circle=true', () => {
 
 it('disables the animation if and only if enableAnimation is false', () => {
     const { rerender } = render(<Skeleton />)
-    expect(getSkeleton()).toHaveStyle({ animation: '' })
+    expect(getSkeleton()).toHaveStyle({ backgroundImage: /linear-gradient/ })
 
     rerender(<Skeleton enableAnimation />)
-    expect(getSkeleton()).toHaveStyle({ animation: '' })
+    expect(getSkeleton()).toHaveStyle({ backgroundImage: /linear-gradient/ })
 
     rerender(<Skeleton enableAnimation={false} />)
-    expect(getSkeleton()).toHaveStyle({ animation: 'none' })
+    expect(getSkeleton()).toHaveStyle({ backgroundImage: 'none' })
 })
 
 it('uses a custom className', () => {