perf: use composite animation

Skeleton is animated using css tranform instead of background
repositioning. Previously, changing background position caused the
renderer to repaint the gradient on each animation keyframe.

This implementation uses translateX to animate the skeleton effect.
Using css transform doesn't trigger repaint.

Author: aboodz

src/skeleton.css

@@ -1,9 +1,6 @@
 @keyframes react-loading-skeleton {
-    0% {
-        background-position: -200px 0;
-    }
     100% {
-        background-position: calc(200px + 100%) 0;
+        transform: translateX(100%);
     }
 }
 
@@ -13,19 +10,31 @@
     --highlight-color: #f5f5f5;
 
     background-color: var(--base-color);
+
+    width: 100%;
+    border-radius: 0.25rem;
+    display: inline-block;
+    line-height: 1;
+
+    position: relative;
+    overflow: hidden;
+}
+
+.react-loading-skeleton::before {
+    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;