From dd70d30cd354062a9e466b0fa9c5825c7a5acf8c Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 1 Nov 2025 22:17:02 -0700
Subject: [PATCH] fix inconsistent image loader aspect ratio

---
 .../features/shared/components/library-header.module.css   | 2 +-
 src/shared/components/image/image.module.css               | 3 ++-
 src/shared/components/image/image.tsx                      | 7 ++++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/renderer/features/shared/components/library-header.module.css b/src/renderer/features/shared/components/library-header.module.css
index 2840d58f..9398c4c8 100644
--- a/src/renderer/features/shared/components/library-header.module.css
+++ b/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%));
 }
 
diff --git a/src/shared/components/image/image.module.css b/src/shared/components/image/image.module.css
index 835ae0b7..ef330272 100644
--- a/src/shared/components/image/image.module.css
+++ b/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;
 }
diff --git a/src/shared/components/image/image.tsx b/src/shared/components/image/image.tsx
index dabd391c..e07fa602 100644
--- a/src/shared/components/image/image.tsx
+++ b/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) {