chore: single component with shimmer animation

Author: asuzuki-jumptrading

src/features/Navigation/SlotsRenderer.tsx

@@ -257,20 +257,20 @@ export function SlotsPlaceholder({
       width={`${width - 1}px`}
       height={`${height}px`}
       overflow="hidden"
+      className={styles.scrollSlotsPlaceholder}
     >
-      {Array.from({ length: items }, (_, index) => (
-        <MScrollPlaceholderItem key={index} />
-      ))}
+      <div className={clsx(styles.absoluteFullSize, styles.shimmer)} />
+      <div className={styles.absoluteFullSize}>
+        {Array.from({ length: items }, (_, index) => (
+          <MScrollPlaceholderItem key={index} />
+        ))}
+      </div>
     </Box>
   );
 }
 
 export const MScrollPlaceholderItem = memo(function ScrollPlaceholderItem() {
-  return (
-    <Box height="46px" className={styles.slotGroupContainer}>
-      <div className={clsx(styles.slotGroup, styles.scrollPlaceholderItem)} />
-    </Box>
-  );
+  return <div className={styles.scrollPlaceholderItem} />;
 });
 
 function SlotIconName({

src/features/Navigation/slotsRenderer.module.css

@@ -168,33 +168,42 @@
   }
 }
 
-.scroll-placeholder-item {
-  position: relative;
-  overflow: hidden;
-  height: 100%;
-}
-
-.scroll-placeholder-item::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -150%;
-  width: 200%;
-  height: 100%;
-  background: linear-gradient(
-    to right,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 246, 246, 0.05) 50%,
-    rgba(255, 255, 255, 0) 100%
-  );
-  animation: shimmer 1.5s infinite;
-}
-
 @keyframes shimmer {
   from {
-    left: -100%;
+    transform: translateX(0%);
   }
   to {
-    left: 100%;
+    transform: translateX(200%);
   }
 }
+
+.scroll-slots-placeholder {
+  background: var(--slots-list-slot-background-color);
+
+  .absolute-full-size {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .shimmer {
+    margin-left: -100%;
+    will-change: transform;
+    background: linear-gradient(
+      to right,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 246, 246, 0.05) 50%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    animation: shimmer 1.5s infinite;
+  }
+}
+
+.scroll-placeholder-item {
+  height: 46px;
+  margin-bottom: 5px;
+  border-radius: 5px;
+  box-shadow: 0 0 0 4px var(--slot-nav-background-color);
+}