From 8f0ac61aa8ced0640168bbab2b2a618a5ac1eaef Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Wed, 3 Mar 2021 12:36:51 -0800
Subject: [PATCH 1/2] fix(skeleton): updates skeleton state performance

---
 config/browserslist-config-carbon/index.js    |  2 +-
 packages/components/gulpfile.js               |  9 +---
 .../src/globals/scss/_helper-mixins.scss      | 50 ++++++++-----------
 3 files changed, 22 insertions(+), 39 deletions(-)

diff --git a/config/browserslist-config-carbon/index.js b/config/browserslist-config-carbon/index.js
index 561674517188..2369b16cf911 100644
--- a/config/browserslist-config-carbon/index.js
+++ b/config/browserslist-config-carbon/index.js
@@ -7,4 +7,4 @@
 
 'use strict';
 
-module.exports = ['last 1 versions', 'ie >= 11', 'Firefox ESR'];
+module.exports = ['last 1 version', 'ie >= 11', 'Firefox ESR'];
diff --git a/packages/components/gulpfile.js b/packages/components/gulpfile.js
index 25e99377a925..223af9a94030 100644
--- a/packages/components/gulpfile.js
+++ b/packages/components/gulpfile.js
@@ -417,14 +417,7 @@ gulp.task('sass:dev', () => {
         })
       ).on('error', sass.logError)
     )
-    .pipe(
-      postcss([
-        customProperties(),
-        autoprefixer({
-          browsers: ['> 1%', 'last 2 versions'],
-        }),
-      ])
-    )
+    .pipe(postcss([customProperties(), autoprefixer()]))
     .pipe(sourcemaps.write('.'))
     .pipe(gulp.dest('demo'))
     .pipe(browserSync.stream({ match: '**/*.css' }));
diff --git a/packages/components/src/globals/scss/_helper-mixins.scss b/packages/components/src/globals/scss/_helper-mixins.scss
index 37163f7624e6..9ae1932a0d5b 100644
--- a/packages/components/src/globals/scss/_helper-mixins.scss
+++ b/packages/components/src/globals/scss/_helper-mixins.scss
@@ -185,13 +185,12 @@
 
   &::before {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 0%;
+    width: 100%;
     height: 100%;
     background: $skeleton-02;
     animation: 3000ms ease-in-out skeleton infinite;
     content: '';
+    will-change: transform-origin, transform, opacity;
 
     @media (prefers-reduced-motion: reduce) {
       animation: none;
@@ -202,51 +201,42 @@
 @include exports('skeleton') {
   @keyframes skeleton {
     0% {
-      right: auto;
-      left: 0;
-      width: 0%;
+      transform: scaleX(0);
+      transform-origin: left;
       opacity: 0.3;
     }
     20% {
-      right: auto;
-      left: 0;
-      width: 100%;
+      transform: scaleX(1);
+      transform-origin: left;
       opacity: 1;
     }
     28% {
-      right: 0;
-      left: auto;
-      width: 100%;
+      transform: scaleX(1);
+      transform-origin: right;
     }
     51% {
-      right: 0;
-      left: auto;
-      width: 0%;
+      transform: scaleX(0);
+      transform-origin: right;
     }
     58% {
-      right: 0;
-      left: auto;
-      width: 0%;
+      transform: scaleX(0);
+      transform-origin: right;
     }
     82% {
-      right: 0;
-      left: auto;
-      width: 100%;
+      transform: scaleX(1);
+      transform-origin: right;
     }
     83% {
-      right: auto;
-      left: 0;
-      width: 100%;
+      transform: scaleX(1);
+      transform-origin: left;
     }
     96% {
-      right: auto;
-      left: 0;
-      width: 0%;
+      transform: scaleX(0);
+      transform-origin: left;
     }
     100% {
-      right: auto;
-      left: 0;
-      width: 0%;
+      transform: scaleX(0);
+      transform-origin: left;
       opacity: 0.3;
     }
   }

From d2dbf145a806fdc1affd3af40e2acf25065bf48f Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Wed, 3 Mar 2021 14:27:12 -0800
Subject: [PATCH 2/2] chore(tests): update snapshots

---
 .../__tests__/__snapshots__/grid-test.js.snap | 45 ++++++++-----------
 1 file changed, 18 insertions(+), 27 deletions(-)

diff --git a/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap b/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap
index 9b975f1c8c96..723e096360af 100644
--- a/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap
+++ b/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap
@@ -51,43 +51,34 @@ em {
 
 @keyframes skeleton {
   0% {
-    right: auto;
-    left: 0;
-    width: 0%;
+    transform: scaleX(0);
+    transform-origin: left;
     opacity: 0.3; }
   20% {
-    right: auto;
-    left: 0;
-    width: 100%;
+    transform: scaleX(1);
+    transform-origin: left;
     opacity: 1; }
   28% {
-    right: 0;
-    left: auto;
-    width: 100%; }
+    transform: scaleX(1);
+    transform-origin: right; }
   51% {
-    right: 0;
-    left: auto;
-    width: 0%; }
+    transform: scaleX(0);
+    transform-origin: right; }
   58% {
-    right: 0;
-    left: auto;
-    width: 0%; }
+    transform: scaleX(0);
+    transform-origin: right; }
   82% {
-    right: 0;
-    left: auto;
-    width: 100%; }
+    transform: scaleX(1);
+    transform-origin: right; }
   83% {
-    right: auto;
-    left: 0;
-    width: 100%; }
+    transform: scaleX(1);
+    transform-origin: left; }
   96% {
-    right: auto;
-    left: 0;
-    width: 0%; }
+    transform: scaleX(0);
+    transform-origin: left; }
   100% {
-    right: auto;
-    left: 0;
-    width: 0%;
+    transform: scaleX(0);
+    transform-origin: left;
     opacity: 0.3; } }
 
 .bx--grid {