new shimmer effect for skeleton feed

src/components/skeleton/SkeletonChannelInfo.tsx

@@ -1,5 +1,5 @@
 const SkeletonChannelInfo = () => {
-    const textClassName = 'bg-zinc-50 rounded-full h-4 mb-2 animate-pulse'
+    const textClassName = 'bg-zinc-50 rounded-full h-4 mb-2 shimmer'
     const skeletonArray = Array.from({ length: 3 }, (_, i) => i)
     return (
         <>

src/components/skeleton/SkeletonFeed.tsx

@@ -8,15 +8,15 @@ const SkeletonFeed = () => {
         <div className="max-w-[2048px] mx-auto">
             <div className="w-full lg:w-4/5 max-w-6xl m-auto pt-4">
                 <div
-                    className="bg-zinc-50 rounded-full h-6 animate-pulse my-2"
+                    className="bg-zinc-50 rounded-full h-6 shimmer my-2"
                     style={{ width: 'min(75vw, 256px)' }}
                 ></div>
-                <div className="relative bg-zinc-700 my-8 p-4 rounded-lg h-80 animate-pulse">
-                    <div className="absolute inset-4 bg-zinc-50 animate-pulse"></div>
+                <div className="relative bg-zinc-700 my-8 p-4 rounded-lg h-80 shimmer">
+                    <div className="absolute inset-4 bg-zinc-50 shimmer"></div>
                 </div>
             </div>
             <div
-                className="bg-zinc-50 rounded-full h-5 animate-pulse my-4 mx-4"
+                className="bg-zinc-50 rounded-full h-5 shimmer my-4 mx-4"
                 style={{ width: 'min(85vw, 320px)' }}
             ></div>
             <article className="p-4 gap-4 grid grid-cols-1 min-[384px]:grid-cols-2 sm:grid-cols-auto-fill-284">

src/components/skeleton/SkeletonProfilePicture.tsx

@@ -1,7 +1,7 @@
 const SkeletonProfilePicture = () => {
     return (
         <div
-            className="rounded-full p-1 col-span-1 mx-auto animate-pulse bg-zinc-50"
+            className="rounded-full p-1 col-span-1 mx-auto shimmer bg-zinc-50"
             style={{ width: 'max(36px, 80%)', aspectRatio: '1/1' }}
         ></div>
     )

src/components/skeleton/SkeletonThumbnail.tsx

@@ -1,6 +1,6 @@
 const SkeletonThumbnail = () => {
     return (
-        <div className="rounded-xl w-full mb-2 animate-pulse bg-zinc-50 aspect-video"></div>
+        <div className="rounded-xl w-full mb-2 shimmer bg-zinc-50 aspect-video"></div>
     )
 }
 

src/index.css

@@ -15,6 +15,21 @@ input[type='search']::-webkit-search-cancel-button:hover {
     transform: rotate(90deg);
 }
 
+@keyframes shimmer {
+    0% {
+        background-position: -200% 0;
+    }
+    100% {
+        background-position: 200% 0;
+    }
+}
+
+.shimmer {
+    background: linear-gradient(90deg, #e5e7eb 25%, #fcfcfd 40%, #e5e7eb 75%);
+    background-size: 200% 100%;
+    animation: shimmer 2s infinite;
+}
+
 ::-webkit-scrollbar {
     width: 8px;
 }