From 281b478225916cbb86710e6c9b607439362ca37e Mon Sep 17 00:00:00 2001
From: Nick Schorr <naschorr@gmail.com>
Date: Thu, 7 Mar 2024 22:32:04 -0800
Subject: [PATCH] Implemented loading skeletons for images

---
 .../gallery-inline.component.html               | 17 ++++++++++++++---
 src/styles/styles.scss                          | 10 ++--------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/app/shared/gallery/components/gallery-inline/gallery-inline.component.html b/src/app/shared/gallery/components/gallery-inline/gallery-inline.component.html
index 07c8073..9be3b88 100644
--- a/src/app/shared/gallery/components/gallery-inline/gallery-inline.component.html
+++ b/src/app/shared/gallery/components/gallery-inline/gallery-inline.component.html
@@ -1,9 +1,20 @@
 <div class="gallery-container flex">
     <ng-container *ngFor="let image of images; index as i;">
+        <!--
+            Subtract 0.001 from the aspect ratio to force it down a bit and thus slightly shrink the resulting width.
+            Sometimes it's 1px too wide, so this nasty hack fixes it
+        -->
         <div    [ngClass]="{'mr-2': i < images.length - 1}"
-                class="gallery-item cursor-pointer"
-                (click)="onImageClick(image, i)">
-            <img [src]="image.thumbnailUrl" [alt]="image.altText" />
+                [ngStyle]="{
+                    'width': 'auto',
+                    'height': image.thumbnailHeightPx + ' px',
+                    'aspect-ratio': image.aspectRatio - 0.001
+                }"
+                class="gallery-item skeleton">
+            <img    [src]="image.thumbnailUrl"
+                    [alt]="image.altText"
+                    (click)="onImageClick(image, i)"
+                    class="cursor-pointer" />
         </div>
     </ng-container>
 </div>
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 09f5c5a..4e05024 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -197,13 +197,6 @@ ul li::before {
     opacity: 1;
 }
 
-.skeleton {
-    background-color: variables.$medium-color;
-    background-image: linear-gradient(90deg, variables.$medium-color-filter 0px, variables.$medium-color 40px, variables.$medium-color-filter 80px);
-    background-size: 100%;
-    animation: skeleton 1.5s ease-in-out infinite;
-}
-
 .skeleton {
     // handle opacity here, otherwise the whole element will be transparent
     background: repeating-linear-gradient(
@@ -221,7 +214,8 @@ ul li::before {
     -moz-animation: skeleton 5s ease-in-out infinite;
     animation: skeleton 5s ease-in-out infinite;
 
-    box-shadow: 0 0 0 0.1rem variables.$medium-color inset;
+    box-shadow: 0 0 0 0.1rem color.adjust(variables.$medium-color, $alpha:-0.85) inset;
+    border-radius: variables.$border-radius * 2;
 }
 
 @-webkit-keyframes skeleton {