Implemented loading skeletons for images

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>

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 {