From 891c9165d7832e4be685629ce275c153ca201206 Mon Sep 17 00:00:00 2001
From: Yury Bondarenko <ybnd@tuta.io>
Date: Wed, 21 Sep 2022 10:24:18 +0200
Subject: [PATCH] Improve thumbnail loading animation

- Minimize content shift by leaving space around the animation (same as the placeholder)
- Replace animation with more compact spinner to prevent wrapping when the thumbnail is very narrow
---
 src/app/shared/loading/loading.component.html      |  5 ++++-
 src/app/shared/loading/loading.component.scss      | 10 +++++++---
 src/app/shared/loading/loading.component.ts        |  5 +++++
 src/app/shared/loading/themed-loading.component.ts |  3 ++-
 src/app/thumbnail/thumbnail.component.html         | 14 ++++++++++----
 src/app/thumbnail/thumbnail.component.scss         |  4 ++++
 src/app/thumbnail/thumbnail.component.spec.ts      |  2 +-
 7 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/app/shared/loading/loading.component.html b/src/app/shared/loading/loading.component.html
index efec4e597e..bb407098d7 100644
--- a/src/app/shared/loading/loading.component.html
+++ b/src/app/shared/loading/loading.component.html
@@ -1,4 +1,4 @@
-<div>
+<div *ngIf="!spinner">
   <label *ngIf="showMessage && message">{{ message }}</label>
   <div class="loader">
     <span class="l-1"></span>
@@ -13,3 +13,6 @@
     <span class="l-10"></span>
   </div>
 </div>
+<div *ngIf='spinner' class="spinner spinner-border" role="status">
+  <span class="sr-only">{{ message }}</span>
+</div>
diff --git a/src/app/shared/loading/loading.component.scss b/src/app/shared/loading/loading.component.scss
index e2287cdc8b..a86778c9b5 100644
--- a/src/app/shared/loading/loading.component.scss
+++ b/src/app/shared/loading/loading.component.scss
@@ -3,7 +3,7 @@
 }
 
 span {
-	display: block; 
+	display: block;
 	margin: 0 auto;
 }
 
@@ -13,11 +13,11 @@ span[class*="l-"] {
 	background: #000;
 	display: inline-block;
 	margin: 12px 2px;
-	
+
 	border-radius: 100%;
 	-webkit-border-radius: 100%;
 	-moz-border-radius: 100%;
-	
+
 	-webkit-animation: loader 2s infinite;
 	-webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
 	-webkit-animation-fill-mode: both;
@@ -71,3 +71,7 @@ span.l-10 {-webkit-animation-delay: 0s;animation-delay: 0s;-ms-animation-delay:
 	50% {-ms-transform: translateX(30px); opacity: 0;}
 	100% {opacity: 0;}
 }
+
+.spinner {
+  color: var(--bs-gray-600);
+}
diff --git a/src/app/shared/loading/loading.component.ts b/src/app/shared/loading/loading.component.ts
index d617d8c7a4..e64d89620b 100644
--- a/src/app/shared/loading/loading.component.ts
+++ b/src/app/shared/loading/loading.component.ts
@@ -15,6 +15,11 @@ export class LoadingComponent implements OnDestroy, OnInit {
   @Input() message: string;
   @Input() showMessage = true;
 
+  /**
+   * Show a more compact spinner animation instead of the default one
+   */
+  @Input() spinner = false;
+
   private subscription: Subscription;
 
   constructor(private translate: TranslateService) {
diff --git a/src/app/shared/loading/themed-loading.component.ts b/src/app/shared/loading/themed-loading.component.ts
index 0f887a025f..ffdf9d3cbe 100644
--- a/src/app/shared/loading/themed-loading.component.ts
+++ b/src/app/shared/loading/themed-loading.component.ts
@@ -15,8 +15,9 @@ export class ThemedLoadingComponent extends ThemedComponent<LoadingComponent> {
 
   @Input() message: string;
   @Input() showMessage = true;
+  @Input() spinner = false;
 
-  protected inAndOutputNames: (keyof LoadingComponent & keyof this)[] = ['message', 'showMessage'];
+  protected inAndOutputNames: (keyof LoadingComponent & keyof this)[] = ['message', 'showMessage', 'spinner'];
 
   constructor(
     protected resolver: ComponentFactoryResolver,
diff --git a/src/app/thumbnail/thumbnail.component.html b/src/app/thumbnail/thumbnail.component.html
index 5a15fd4db6..b679450a13 100644
--- a/src/app/thumbnail/thumbnail.component.html
+++ b/src/app/thumbnail/thumbnail.component.html
@@ -1,14 +1,20 @@
 <div class="thumbnail" [class.limit-width]="limitWidth" *ngVar="(isLoading$ | async) as isLoading">
-  <ds-themed-loading *ngIf="isLoading" class="thumbnail-content" [showMessage]="false">
-    text-content
-  </ds-themed-loading>
+  <div *ngIf="isLoading" class="thumbnail-content outer">
+    <div class="inner">
+      <div class="centered">
+        <ds-themed-loading [spinner]="true"></ds-themed-loading>
+      </div>
+    </div>
+  </div>
   <ng-container *ngVar="(src$ | async) as src">
     <!-- don't use *ngIf="!isLoading" so the thumbnail can load in while the animation is playing -->
     <img *ngIf="src !== null" class="thumbnail-content img-fluid" [ngClass]="{'d-none': isLoading}"
          [src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()" (load)="successHandler()">
     <div *ngIf="src === null && !isLoading" class="thumbnail-content outer">
       <div class="inner">
-        <div class="thumbnail-placeholder w-100 h-100 p-3 lead">{{ placeholder | translate }}</div>
+        <div class="thumbnail-placeholder centered p-3 lead">
+          {{ placeholder | translate }}
+        </div>
       </div>
     </div>
   </ng-container>
diff --git a/src/app/thumbnail/thumbnail.component.scss b/src/app/thumbnail/thumbnail.component.scss
index b15238afac..e9cb1a6cb5 100644
--- a/src/app/thumbnail/thumbnail.component.scss
+++ b/src/app/thumbnail/thumbnail.component.scss
@@ -26,6 +26,10 @@ img {
       border: var(--ds-thumbnail-placeholder-border);
       color: var(--ds-thumbnail-placeholder-color);
       font-weight: bold;
+    }
+    > .centered {
+      width: 100%;
+      height: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
diff --git a/src/app/thumbnail/thumbnail.component.spec.ts b/src/app/thumbnail/thumbnail.component.spec.ts
index 3161885ad2..5b313d61d4 100644
--- a/src/app/thumbnail/thumbnail.component.spec.ts
+++ b/src/app/thumbnail/thumbnail.component.spec.ts
@@ -244,7 +244,7 @@ describe('ThumbnailComponent', () => {
 
         fixture.detectChanges();
         const placeholder = fixture.debugElement.query(By.css('div.thumbnail-placeholder')).nativeElement;
-        expect(placeholder.innerHTML).toBe('TRANSLATED ' + comp.placeholder);
+        expect(placeholder.innerHTML).toContain('TRANSLATED ' + comp.placeholder);
       });
     });
   });