fix image column skeleton aspect ratio

src/renderer/components/item-list/item-table-list/columns/image-column.module.css

@@ -4,6 +4,15 @@
     border-radius: 0;
 }
 
+.image-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
 .compact-image-container .skeleton {
     border-radius: 0;
 }
@@ -24,11 +33,9 @@
 }
 
 .image-container-with-aspect-ratio {
-    display: flex;
+    width: auto;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
     height: 100%;
+    aspect-ratio: 1 / 1;
     border-radius: var(--theme-radius-md);
 }
 
@@ -40,10 +47,10 @@
     object-position: center;
 }
 
-.image-container {
+.skeleton-with-aspect-ratio {
-    position: relative;
+    width: auto;
-    width: 100%;
     height: 100%;
+    aspect-ratio: 1 / 1;
 }
 
 .play-button-overlay {

src/renderer/components/item-list/item-table-list/columns/image-column.tsx

@@ -125,6 +125,8 @@ export const ImageColumn = (props: ItemTableListInnerColumn) => {
             <div
                 className={clsx(styles.imageContainer, {
                     [styles.compactImageContainer]: props.size === 'compact',
+                    [styles.skeletonWithAspectRatio]:
+                        props.size === 'default' || props.size === 'large',
                 })}
             >
                 <Skeleton containerClassName={styles.skeleton} />