From a7bcddf597b41c6789e5a90fc02e7e6ed1d3cfda Mon Sep 17 00:00:00 2001
From: Art Lowel <art.lowel@gmail.com>
Date: Tue, 6 May 2025 14:38:45 +0200
Subject: [PATCH] fix issue where thumbnail would sometimes keep loading
 indefinitely

---
 src/app/thumbnail/thumbnail.component.ts | 26 +++++++++++++++---------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/app/thumbnail/thumbnail.component.ts b/src/app/thumbnail/thumbnail.component.ts
index 4b91c147ce..43cce16d36 100644
--- a/src/app/thumbnail/thumbnail.component.ts
+++ b/src/app/thumbnail/thumbnail.component.ts
@@ -97,13 +97,6 @@ export class ThumbnailComponent implements OnChanges {
    */
   ngOnChanges(changes: SimpleChanges): void {
     if (isPlatformBrowser(this.platformID)) {
-      // every time the inputs change we need to start the loading animation again, as it's possible
-      // that thumbnail is first set to null when the parent component initializes and then set to
-      // the actual value
-      if (this.isLoading$.getValue() === false) {
-        this.isLoading$.next(true);
-      }
-
       if (hasNoValue(this.thumbnail)) {
         this.setSrc(this.defaultImage);
         return;
@@ -196,9 +189,22 @@ export class ThumbnailComponent implements OnChanges {
    * @param src
    */
   setSrc(src: string): void {
-    this.src$.next(src);
-    if (src === null) {
-      this.isLoading$.next(false);
+    // only update the src if it has changed (the parent component may fire the same one multiple times
+    if (this.src$.getValue() !== src) {
+      // every time the src changes we need to start the loading animation again, as it's possible
+      // that it is first set to null when the parent component initializes and then set to
+      // the actual value
+      //
+      // isLoading$ will be set to false by the error or success handler afterwards, except in the
+      // case where src is null, then we have to set it manually here (because those handlers won't
+      // trigger)
+      if (this.isLoading$.getValue() === false) {
+        this.isLoading$.next(true);
+      }
+      this.src$.next(src);
+      if (src === null) {
+        this.isLoading$.next(false);
+      }
     }
   }