From 816db700e1030744bdf1a5995ba42eeee85fc454 Mon Sep 17 00:00:00 2001
From: Louis-Marie Michelin <33673240+lmichelin@users.noreply.github.com>
Date: Wed, 20 Sep 2023 05:16:53 +0200
Subject: [PATCH] feat(web): cancel pending requests on image change (#4145)

---
 .../lib/components/asset-viewer/photo-viewer.svelte   | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/web/src/lib/components/asset-viewer/photo-viewer.svelte b/web/src/lib/components/asset-viewer/photo-viewer.svelte
index 8d10dc935e..9049d6cc35 100644
--- a/web/src/lib/components/asset-viewer/photo-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/photo-viewer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { fade } from 'svelte/transition';
-  import { onMount } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import { api, AssetResponseDto } from '@api';
   import { notificationController, NotificationType } from '../shared-components/notification/notification';
@@ -13,6 +13,7 @@
 
   let imgElement: HTMLDivElement;
   let assetData: string;
+  let abortController: AbortController;
   let hasZoomed = false;
   let copyImageToClipboard: (src: string) => Promise<Blob>;
   let canCopyImagesToClipboard: () => boolean;
@@ -25,12 +26,20 @@
     canCopyImagesToClipboard = module.canCopyImagesToClipboard;
   });
 
+  onDestroy(() => {
+    abortController?.abort();
+  });
+
   const loadAssetData = async ({ loadOriginal }: { loadOriginal: boolean }) => {
     try {
+      abortController?.abort();
+      abortController = new AbortController();
+
       const { data } = await api.assetApi.serveFile(
         { id: asset.id, isThumb: false, isWeb: !loadOriginal, key: api.getKey() },
         {
           responseType: 'blob',
+          signal: abortController.signal,
         },
       );