will-change css property for loaders animations

strapi · Sep 6, 2022 · 421a600 · 421a600
1 parent 719c09f
commit 421a600
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 0 deletions.
diff --git a/packages/strapi-design-system/src/Button/Button.js b/packages/strapi-design-system/src/Button/Button.js
@@ -20,6 +20,7 @@ const rotation = keyframes`
 
 const LoadingWrapper = styled.div`
   animation: ${rotation} 2s infinite linear;
+  will-change: transform;
 `;
 
 const BoxFullHeight = styled(Box)`

diff --git a/packages/strapi-design-system/src/Loader/Loader.js b/packages/strapi-design-system/src/Loader/Loader.js
@@ -15,6 +15,7 @@ const rotation = keyframes`
 
 const LoaderImg = styled.img`
   animation: ${rotation} 1s infinite linear;
+  will-change: transform;
   ${({ small, theme }) => small && `width: ${theme.spaces[6]}; height: ${theme.spaces[6]};`}
 `;
 

diff --git a/packages/strapi-design-system/src/TextButton/TextButton.js b/packages/strapi-design-system/src/TextButton/TextButton.js
@@ -18,6 +18,7 @@ const rotation = keyframes`
 
 const LoadingWrapper = styled.div`
   animation: ${rotation} 2s infinite linear;
+  will-change: transform;
 `;
 
 const TextButtonWrapper = styled(Flex)`

diff --git a/packages/strapi-design-system/tests/__snapshots__/storyshots.spec.js.snap b/packages/strapi-design-system/tests/__snapshots__/storyshots.spec.js.snap
@@ -5271,6 +5271,7 @@ exports[`Storyshots Design System/Components/Button icons 1`] = `
 .c14 {
   -webkit-animation: gzYjWD 2s infinite linear;
   animation: gzYjWD 2s infinite linear;
+  will-change: transform;
 }
 
 .c9 {
@@ -26355,6 +26356,7 @@ exports[`Storyshots Design System/Components/Loader base 1`] = `
 .c3 {
   -webkit-animation: gzYjWD 1s infinite linear;
   animation: gzYjWD 1s infinite linear;
+  will-change: transform;
 }
 
 <div
@@ -26418,6 +26420,7 @@ exports[`Storyshots Design System/Components/Loader small 1`] = `
 .c3 {
   -webkit-animation: gzYjWD 1s infinite linear;
   animation: gzYjWD 1s infinite linear;
+  will-change: transform;
   width: 24px;
   height: 24px;
 }
@@ -43526,6 +43529,7 @@ exports[`Storyshots Design System/Components/TextButton loading 1`] = `
 .c6 {
   -webkit-animation: gzYjWD 2s infinite linear;
   animation: gzYjWD 2s infinite linear;
+  will-change: transform;
 }
 
 .c4 {