fix issue where thumbnail would sometimes keep loading indefinitely

Author: artlowel

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);
+      }
     }
   }