feat: improve asset-viewer next/prev perf and standardize preloading behavior (#24422)

Co-authored-by: Alex <alex.tran1502@gmail.com>

web/src/lib/utils/asset-utils.ts

@@ -557,6 +557,14 @@ export const delay = async (ms: number) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 };
 
+export const getNextAsset = (assets: AssetResponseDto[], currentAsset: AssetResponseDto | undefined) => {
+  return currentAsset && assets[assets.indexOf(currentAsset) + 1];
+};
+
+export const getPreviousAsset = (assets: AssetResponseDto[], currentAsset: AssetResponseDto | undefined) => {
+  return currentAsset && assets[assets.indexOf(currentAsset) - 1];
+};
+
 export const canCopyImageToClipboard = (): boolean => {
   return !!(navigator.clipboard && globalThis.ClipboardItem);
 };

web/src/lib/utils/invocationTracker.ts

@@ -50,4 +50,13 @@ export class InvocationTracker {
   isActive() {
     return this.invocationsStarted !== this.invocationsEnded;
   }
+
+  async invoke<T>(invocable: () => Promise<T>) {
+    const invocation = this.startInvocation();
+    try {
+      return await invocable();
+    } finally {
+      invocation.endInvocation();
+    }
+  }
 }

web/src/lib/utils/sw-messaging.ts

@@ -1,8 +1,14 @@
 const broadcast = new BroadcastChannel('immich');
 
-export function cancelImageUrl(url: string) {
+export function cancelImageUrl(url: string | undefined | null) {
+  if (!url) {
+    return;
+  }
   broadcast.postMessage({ type: 'cancel', url });
 }
-export function preloadImageUrl(url: string) {
+export function preloadImageUrl(url: string | undefined | null) {
+  if (!url) {
+    return;
+  }
   broadcast.postMessage({ type: 'preload', url });
 }