fix inconsistent image loader aspect ratio

src/renderer/features/shared/components/library-header.module.css

@@ -99,7 +99,7 @@
     grid-area: image;
     align-items: flex-end;
     justify-content: center;
-    height: 100%;
+    max-height: 100%;
     filter: drop-shadow(0 0 8px rgb(0 0 0 / 50%));
 }
 

src/shared/components/image/image.module.css

@@ -23,6 +23,7 @@
 .loader {
     width: 100%;
     height: 100%;
+    aspect-ratio: 1 / 1;
 }
 
 .image-container {
@@ -38,7 +39,7 @@
     justify-content: center;
     width: 100%;
     height: 100%;
-    max-height: 100%;
+    aspect-ratio: 1 / 1;
     background-color: darken(var(--theme-colors-foreground), 40%);
     opacity: 0.3;
 }

src/shared/components/image/image.tsx

@@ -107,7 +107,12 @@ const ImageContainer = forwardRef(
 );
 
 function ImageLoader({ className }: ImageLoaderProps) {
-    return <Skeleton className={clsx(styles.skeleton, styles.loader, className)} />;
+    return (
+        <Skeleton
+            className={clsx(styles.skeleton, styles.loader, className)}
+            containerClassName={styles.skeletonContainer}
+        />
+    );
 }
 
 function ImageUnloader({ className }: ImageUnloaderProps) {