replace bg-position animation with faster one (#3189)

* replace bg-position animation with faster one

* fix tests

toolkit/theme/foundations/animations.ts

@@ -9,4 +9,12 @@ export const keyframes = {
       transform: 'translateX(-100%)',
     },
   },
+  skeletonShimmer: {
+    from: {
+      transform: 'translateX(-100%)',
+    },
+    to: {
+      transform: 'translateX(100%)',
+    },
+  },
 };

toolkit/theme/recipes/skeleton.recipe.ts

@@ -21,7 +21,7 @@ export const recipe = defineRecipe({
         borderWidth: '0px',
         pointerEvents: 'none',
         userSelect: 'none',
-        '&::before, &::after, *': {
+        '& > *': {
           visibility: 'hidden',
         },
       },
@@ -33,15 +33,33 @@ export const recipe = defineRecipe({
         animationDuration: 'var(--duration, 1.2s)',
       },
       shine: {
+        opacity: 0.5,
         '--animate-from': '100%',
         '--animate-to': '-100%',
         '--start-color': 'colors.skeleton.bg.start',
         '--end-color': 'colors.skeleton.bg.end',
-        backgroundImage:
-          'linear-gradient(90deg,var(--start-color) 8%,var(--end-color) 18%,var(--start-color) 33%)',
-        backgroundColor: 'transparent',
-        backgroundSize: '200% 100%',
-        animation: 'bg-position var(--duration, 2s) linear infinite',
+        position: 'relative',
+        overflow: 'hidden',
+        backgroundColor: 'var(--start-color)',
+        animation: 'none',
+        '&::after': {
+          content: '""',
+          position: 'absolute',
+          inset: '0',
+          left: '0',
+          width: '100%',
+          pointerEvents: 'none',
+          willChange: 'transform',
+          transform: 'translateX(-100%)',
+          backgroundImage:
+            'linear-gradient(90deg, transparent 0%, transparent 32%, var(--end-color) 46%, var(--end-color) 54%, transparent 68%, transparent 100%)',
+          animation: 'skeletonShimmer var(--duration, 2s) linear infinite',
+        },
+        _motionReduce: {
+          '&::after': {
+            animation: 'none',
+          },
+        },
       },
       none: {
         animation: 'none',

ui/marketplace/essentialDapps/revoke/Revoke.pw.tsx

@@ -10,12 +10,13 @@ const ESSENTIAL_DAPPS_CONFIG = JSON.stringify({
   revoke: { chains: [ opSuperchainMock.chainDataA.id ] },
 });
 
-test('base view +@dark-mode +@mobile', async({ render, mockEnvs, mockEssentialDappsChainsConfig }: TestFnArgs) => {
+test('base view +@dark-mode +@mobile', async({ render, mockEnvs, mockEssentialDappsChainsConfig, mockAssetResponse }: TestFnArgs) => {
   await mockEnvs([
     [ 'NEXT_PUBLIC_MARKETPLACE_ENABLED', 'true' ],
     [ 'NEXT_PUBLIC_MARKETPLACE_ESSENTIAL_DAPPS_CONFIG', ESSENTIAL_DAPPS_CONFIG ],
   ]);
   await mockEssentialDappsChainsConfig();
+  await mockAssetResponse(opSuperchainMock.chainDataA.logo as string, './playwright/mocks/image_s.jpg');
 
   const component = await render(<Revoke/>);
 

ui/pages/Pool.pw.tsx

@@ -25,5 +25,6 @@ test('base view +@mobile +@dark-mode', async({ render, mockApiResponse, mockText
   await expect(component).toHaveScreenshot({
     mask: [ page.locator(pwConfig.adsBannerSelector) ],
     maskColor: pwConfig.maskColor,
+    maxDiffPixels: 20,
   });
 });

ui/pages/Tokens.pw.tsx

@@ -63,7 +63,7 @@ test('with search +@mobile +@dark-mode', async({ render, mockApiResponse }) => {
   await component.getByRole('textbox', { name: 'Token name or symbol' }).fill('foo');
   await component.getByRole('textbox', { name: 'Token name or symbol' }).blur();
 
-  await expect(component).toHaveScreenshot();
+  await expect(component).toHaveScreenshot({ maxDiffPixels: 20 });
 });
 
 test.describe('bridged tokens', () => {