fix(loaders): optimize performance of skeleton loader (#1610)

Author: geotrev

packages/loaders/.size-snapshot.json

@@ -1,20 +1,20 @@
 {
   "index.cjs.js": {
-    "bundled": 20732,
-    "minified": 16106,
-    "gzipped": 4232
+    "bundled": 20801,
+    "minified": 16175,
+    "gzipped": 4233
   },
   "index.esm.js": {
-    "bundled": 19197,
-    "minified": 14618,
-    "gzipped": 4134,
+    "bundled": 19266,
+    "minified": 14687,
+    "gzipped": 4132,
     "treeshaked": {
       "rollup": {
-        "code": 11907,
+        "code": 11976,
         "import_statements": 432
       },
       "webpack": {
-        "code": 12875
+        "code": 12944
       }
     }
   }

packages/loaders/src/elements/Skeleton.spec.tsx

@@ -51,9 +51,6 @@ describe('Skeleton', () => {
   it('applies RTL styling correctly', () => {
     const { container } = renderRtl(<Skeleton />);
 
-    expect(container.firstChild).toHaveStyleRule('right', '-1800px', {
-      modifier: '&::before'
-    });
     expect(container.firstChild).toHaveStyleRule(
       'background-image',
       'linear-gradient( -45deg, transparent, rgba(255,255,255,0.6), transparent )',

packages/loaders/src/styled/StyledSkeleton.ts

@@ -27,14 +27,20 @@ const fadeInAnimation = keyframes`
 `;
 
 const skeletonAnimation = keyframes`
+  0% {
+    transform: translateX(-100%);
+  }
   100% {
-    left: 100%;
+    transform: translateX(100%);
   }
 `;
 
 const skeletonRtlAnimation = keyframes`
+  0% {
+    transform: translateX(100%);
+  }
   100% {
-    right: 100%;
+    transform: translateX(-100%)
   }
 `;
 
@@ -64,13 +70,11 @@ interface IStyledSkeletonProps {
 const retrieveSkeletonAnimation = ({ theme }: ThemeProps<DefaultTheme>) => {
   if (theme.rtl) {
     return css`
-      right: -1800px;
       animation: ${skeletonRtlAnimation} 1.5s ease-in-out 300ms infinite;
     `;
   }
 
   return css`
-    left: -1800px;
     animation: ${skeletonAnimation} 1.5s ease-in-out 300ms infinite;
   `;
 };