Merge pull request #121 from dvtng/fix-120

Fix circle in Safari and enableAnimation regression

Author: srmagura

.husky/pre-commit

@@ -1,8 +1,10 @@
-## UNRELEASED
+## 3.0.1
 
 ### Bug Fixes
 
--   Fix `SkeletonProps` not being exported from the main entry point
+-   Fix circle skeleton animation being broken in Safari (#120)
+-   Fix `SkeletonProps` not being exported from the main entry point (#118)
+-   Fix `enableAnimation` prop having no effect. This was a regression.
 
 ## 3.0.0
 

CHANGELOG.md

@@ -1,6 +1,6 @@
 {
     "name": "react-loading-skeleton",
-    "version": "3.0.0",
+    "version": "3.0.1",
     "keywords": [
         "react",
         "loading",

package.json

@@ -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/Skeleton.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/__tests__/Skeleton.test.tsx

@@ -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);
 
@@ -19,11 +20,12 @@
 
     position: relative;
     overflow: hidden;
+    z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */
 }
 
 .react-loading-skeleton::after {
     content: ' ';
-    display: block;
+    display: var(--pseudo-element-display);
     position: absolute;
     left: 0;
     right: 0;