Move fadein directly to component

src/renderer/components/virtual-grid/grid-card/poster-card.tsx

@@ -82,12 +82,14 @@ interface ImageProps {
 }
 
 const Image = styled.img<ImageProps>`
-  ${fadeIn};
   width: ${({ height }) => `${height}px`};
   height: ${({ height }) => `${height}px`};
   object-fit: cover;
   border: 0;
   border-radius: 2px;
+
+  ${fadeIn}
+  animation: fadein 0.3s ease-in-out;
 `;
 
 const ControlsContainer = styled.div`

src/renderer/features/player/components/left-controls.tsx

@@ -32,11 +32,13 @@ const MetadataStack = styled(motion.div)`
 `;
 
 const Image = styled(motion(Link))`
-  ${fadeIn};
   width: 70px;
   height: 70px;
   filter: drop-shadow(0 0 5px rgb(0, 0, 0, 100%));
 
+  ${fadeIn};
+  animation: fadein 0.2s ease-in-out;
+
   button {
     display: none;
   }
@@ -91,7 +93,7 @@ export const LeftControls = () => {
                 transition={{ duration: 0.3, ease: 'easeInOut' }}
               >
                 {song?.imageUrl ? (
-                  <PlayerbarImage src={song?.imageUrl} />
+                  <PlayerbarImage loading="eager" src={song?.imageUrl} />
                 ) : (
                   <>
                     <Center

src/renderer/features/sidebar/components/sidebar.tsx

@@ -30,10 +30,12 @@ const SidebarContainer = styled.div`
 `;
 
 const ImageContainer = styled(motion(Link))<{ height: string }>`
-  ${fadeIn};
   position: relative;
   height: ${(props) => props.height};
 
+  ${fadeIn};
+  animation: fadein 0.2s ease-in-out;
+
   button {
     display: none;
   }
@@ -188,7 +190,7 @@ export const Sidebar = () => {
               transition={{ duration: 0.3, ease: 'easeInOut' }}
             >
               {imageUrl ? (
-                <SidebarImage src={imageUrl} />
+                <SidebarImage loading="eager" src={imageUrl} />
               ) : (
                 <Center
                   sx={{ background: 'var(--placeholder-bg)', height: '100%' }}

src/renderer/styles/mixins.ts

@@ -30,8 +30,6 @@ export const coverBackground = css`
 `;
 
 export const fadeIn = css`
-  animation: fadein 0.3s;
-
   @keyframes fadein {
     from {
       opacity: 0;
@@ -42,3 +40,15 @@ export const fadeIn = css`
     }
   }
 `;
+
+export const rotating = css`
+  @keyframes rotating {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;