style: fix skeleton animation

Author: winverse

Diff for: apps/web/src/components/Skeleton/Skeleton.module.css

@@ -1,7 +1,6 @@
 .block {
-  background: var(--bg-element4);
-  animation: shining 1s ease-in-out infinite;
   display: inline-block;
+  background: var(--bg-element4);
   border-radius: 4px;
   height: 1em;
 
@@ -14,16 +13,4 @@
   &.circle {
     border-radius: 50%;
   }
-
-  @keyframes shining {
-    0% {
-      opacity: 0.5;
-    }
-    50% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0.5;
-    }
-  }
 }

Diff for: apps/web/src/components/Skeleton/Skeleton.tsx

@@ -26,7 +26,7 @@ function Skeleton({
 }: Props) {
   return (
     <div
-      className={cx('block', className, {
+      className={cx('block', 'shining', className, {
         noSpacing: noSpacing || !!marginRight,
         circle,
       })}

Diff for: apps/web/src/features/home/components/PostCard/PostCard.module.css

@@ -16,10 +16,6 @@
     }
   }
 
-  &.isRef {
-    background-color: red;
-  }
-
   .styleLink {
     display: block;
     color: inherit;

Diff for: apps/web/src/features/home/components/PostCardGrid/PostCardGrid.tsx

@@ -73,7 +73,6 @@ function PostCardGrid({
   }
 
   if (isLoading) return <PostCardSkeletonGrid forHome={forHome} forPost={forPost} />
-
   return (
     <ul className={cx('block', 'homeGrid')}>
       {posts.map((post, i) => {

Diff for: apps/web/src/lib/styles/keyframes.module.css

@@ -25,6 +25,14 @@
   animation-timing-function: ease-in-out;
 }
 
+.shining {
+  animation-name: shining;
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}
+
 @keyframes fade-in {
   0% {
     opacity: 0;
@@ -68,3 +76,15 @@
     transform: translateY(400px) scale(0.75);
   }
 }
+
+@keyframes shining {
+  0% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}