Merge branch 'perf/composite-animation' of https://github.com/aboodz/react-loading-skeleton into perf/composite-animation

Author: srmagura

src/Skeleton.tsx

@@ -23,11 +23,11 @@ function styleOptionsToCssProperties({
     duration,
     enableAnimation = defaultEnableAnimation,
 }: SkeletonStyleProps & { circle: boolean }): CSSProperties {
-    const style: CSSProperties = {}
+    const style: CSSProperties & Record<`--${string}`, string> = {}
 
-    if (direction === 'rtl') style.animationDirection = 'reverse'
+    if (direction === 'rtl') style['--animation-direction'] = 'reverse'
 
-    if (typeof duration === 'number') style.animationDuration = `${duration}s`
+    if (typeof duration === 'number') style['--animation-duration'] = `${duration}s`
 
     if (typeof width === 'string' || typeof width === 'number') style.width = width
     if (typeof height === 'string' || typeof height === 'number') style.height = height
@@ -38,13 +38,8 @@ function styleOptionsToCssProperties({
     if (circle) style.borderRadius = '50%'
 
     if (typeof baseColor !== 'undefined' || typeof highlightColor !== 'undefined') {
-        style.backgroundColor = baseColor ?? defaultBaseColor
-        style.backgroundImage = `linear-gradient(
-            90deg,
-            ${baseColor ?? defaultBaseColor},
-            ${highlightColor ?? defaultHighlightColor},
-            ${baseColor ?? defaultBaseColor}
-        )`
+        style['--base-color'] = baseColor ?? defaultBaseColor;
+        style['--highlight-color'] = highlightColor ?? defaultHighlightColor;
     }
 
     if (!enableAnimation) style.backgroundImage = 'none'

src/skeleton.css

@@ -1,34 +1,46 @@
 @keyframes react-loading-skeleton {
-    0% {
-        background-position: -200px 0;
-    }
     100% {
-        background-position: calc(200px + 100%) 0;
+        transform: translateX(100%);
     }
 }
 
 .react-loading-skeleton {
     /* If either color is changed, Skeleton.tsx must be updated as well */
     --base-color: #ebebeb;
     --highlight-color: #f5f5f5;
+    --animation-duration: 1.5s;
+    --animation-direction: normal;
 
     background-color: var(--base-color);
+
+    width: 100%;
+    border-radius: 0.25rem;
+    display: inline-flex;
+    line-height: 1;
+
+    position: relative;
+    overflow: hidden;
+}
+
+.react-loading-skeleton::after {
+    content: ' ';
+    display: block;
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 100%;
+    background-repeat: no-repeat;
     background-image: linear-gradient(
         90deg,
         var(--base-color),
         var(--highlight-color),
         var(--base-color)
     );
-
-    width: 100%;
-    background-size: 200px 100%;
-    background-repeat: no-repeat;
-    border-radius: 0.25rem;
-    display: inline-block;
-    line-height: 1;
+    transform: translateX(-100%);
 
     animation-name: react-loading-skeleton;
-    animation-duration: 1.5s;
+    animation-direction: var(--animation-direction);
+    animation-duration: var(--animation-duration);
     animation-timing-function: ease-in-out;
     animation-iteration-count: infinite;
 }