From e1ca832700bbb7030898f5a98842b0b9a510df5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20M=C3=BCnzenhofer?=
 <michael.muenzenhofer@stud.th-deg.de>
Date: Mon, 25 Aug 2025 19:26:39 +0200
Subject: [PATCH 1/2] new shimmer effect for skeleton feed

---
 src/components/skeleton/SkeletonChannelInfo.tsx   |  2 +-
 src/components/skeleton/SkeletonFeed.tsx          |  8 ++++----
 .../skeleton/SkeletonProfilePicture.tsx           |  2 +-
 src/components/skeleton/SkeletonThumbnail.tsx     |  2 +-
 src/index.css                                     | 15 +++++++++++++++
 5 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/skeleton/SkeletonChannelInfo.tsx b/src/components/skeleton/SkeletonChannelInfo.tsx
index 0bbb8e8..24674d4 100644
--- a/src/components/skeleton/SkeletonChannelInfo.tsx
+++ b/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 (
         <>
diff --git a/src/components/skeleton/SkeletonFeed.tsx b/src/components/skeleton/SkeletonFeed.tsx
index 57254e1..906bb89 100644
--- a/src/components/skeleton/SkeletonFeed.tsx
+++ b/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">
diff --git a/src/components/skeleton/SkeletonProfilePicture.tsx b/src/components/skeleton/SkeletonProfilePicture.tsx
index f7d662a..5e850a5 100644
--- a/src/components/skeleton/SkeletonProfilePicture.tsx
+++ b/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>
     )
diff --git a/src/components/skeleton/SkeletonThumbnail.tsx b/src/components/skeleton/SkeletonThumbnail.tsx
index 10ace1c..024fbd8 100644
--- a/src/components/skeleton/SkeletonThumbnail.tsx
+++ b/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>
     )
 }
 
diff --git a/src/index.css b/src/index.css
index 1ff1c81..0734d78 100644
--- a/src/index.css
+++ b/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 50%, #e5e7eb 75%);
+    background-size: 200% 100%;
+    animation: shimmer 2s infinite;
+}
+
 ::-webkit-scrollbar {
     width: 8px;
 }

From 45f1e9cdb947ce92df7a6f9475b6fce6db785d71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20M=C3=BCnzenhofer?=
 <michael.muenzenhofer@stud.th-deg.de>
Date: Mon, 25 Aug 2025 19:28:45 +0200
Subject: [PATCH 2/2] 40%

---
 src/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.css b/src/index.css
index 0734d78..5cbac60 100644
--- a/src/index.css
+++ b/src/index.css
@@ -25,7 +25,7 @@ input[type='search']::-webkit-search-cancel-button:hover {
 }
 
 .shimmer {
-    background: linear-gradient(90deg, #e5e7eb 25%, #fcfcfd 50%, #e5e7eb 75%);
+    background: linear-gradient(90deg, #e5e7eb 25%, #fcfcfd 40%, #e5e7eb 75%);
     background-size: 200% 100%;
     animation: shimmer 2s infinite;
 }