chore: remove skeleton shimmer animation

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Removed
+
+- Skeleton shimmer animation to reduce rendering cost, keeping the static gray placeholder.
+
 ## [2.22.1] - 2026-07-17
 
 ### Fixed

react/components/ShelfSkeleton/SkeletonPiece.tsx

@@ -3,19 +3,14 @@ import './style.css'
 import React from 'react'
 import { useCssHandles } from 'vtex.css-handles'
 
-const CSS_HANDLES = [
-  'recommendationSkeletonPiece',
-  'recommendationSkeletonPieceShimmer',
-]
+const CSS_HANDLES = ['recommendationSkeletonPiece']
 
 export function SkeletonPiece() {
   const handles = useCssHandles(CSS_HANDLES)
 
   return (
     <div
       className={`${handles.recommendationSkeletonPiece} bg-muted-4 br3 center`}
-    >
-      <div className={`${handles.recommendationSkeletonPieceShimmer}`} />
-    </div>
+    />
   )
 }

react/components/ShelfSkeleton/style.css

@@ -1,17 +1,6 @@
-/* Skeleton animation */
-@keyframes shimmer-anim {
-  0% {
-    transform: translate3d(0, 0, 0);
-  }
-  100% {
-    transform: translate3d(50%, 0, 0);
-  }
-}
-
 .recommendationSkeletonPiece {
   height: 550px;
   width: 300px;
-  overflow: hidden;
 }
 
 @media screen and (max-width: 1024px) {
@@ -21,19 +10,6 @@
   }
 }
 
-.recommendationSkeletonPieceShimmer {
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0),
-    rgba(255, 255, 255, 0.30),
-    rgba(255, 255, 255, 0)
-  );
-  background-size: 50% 100%;
-  animation: shimmer-anim 1s linear infinite;
-}
-
 .recommendationShelfContainer {
   gap: 1.5rem;
 }