fix: albums page reactivity loops (#24046)

Author: danieldietzler

web/src/lib/components/album-page/albums-list.svelte

@@ -33,7 +33,6 @@
   import { groupBy } from 'lodash-es';
   import { onMount, type Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
-  import { run } from 'svelte/legacy';
 
   interface Props {
     ownedAlbums?: AlbumResponseDto[];
@@ -128,63 +127,45 @@
     },
   };
 
-  let albums: AlbumResponseDto[] = $state([]);
-  let filteredAlbums: AlbumResponseDto[] = $state([]);
-  let groupedAlbums: AlbumGroup[] = $state([]);
-
-  let albumGroupOption: string = $state(AlbumGroupBy.None);
-
-  let contextMenuPosition: ContextMenuPosition = $state({ x: 0, y: 0 });
-  let selectedAlbum: AlbumResponseDto | undefined = $state();
-  let isOpen = $state(false);
-
-  // Step 1: Filter between Owned and Shared albums, or both.
-  run(() => {
+  let albums = $derived.by(() => {
     switch (userSettings.filter) {
       case AlbumFilter.Owned: {
-        albums = ownedAlbums;
-        break;
+        return ownedAlbums;
       }
       case AlbumFilter.Shared: {
-        albums = sharedAlbums;
-        break;
+        return sharedAlbums;
       }
       default: {
-        const userId = $user.id;
-        const nonOwnedAlbums = sharedAlbums.filter((album) => album.ownerId !== userId);
-        albums = nonOwnedAlbums.length > 0 ? ownedAlbums.concat(nonOwnedAlbums) : ownedAlbums;
+        const nonOwnedAlbums = sharedAlbums.filter((album) => album.ownerId !== $user.id);
+        return nonOwnedAlbums.length > 0 ? ownedAlbums.concat(nonOwnedAlbums) : ownedAlbums;
       }
     }
   });
-
-  // Step 2: Filter using the given search query.
-  run(() => {
-    if (searchQuery) {
-      const searchAlbumNormalized = normalizeSearchString(searchQuery);
-
-      filteredAlbums = albums.filter((album) => {
-        return normalizeSearchString(album.albumName).includes(searchAlbumNormalized);
-      });
-    } else {
-      filteredAlbums = albums;
-    }
-  });
-
-  // Step 3: Group albums.
-  run(() => {
-    albumGroupOption = getSelectedAlbumGroupOption(userSettings);
+  const normalizedSearchQuery = $derived(normalizeSearchString(searchQuery));
+  let filteredAlbums = $derived(
+    normalizedSearchQuery
+      ? albums.filter(({ albumName }) => normalizeSearchString(albumName).includes(normalizedSearchQuery))
+      : albums,
+  );
+
+  let albumGroupOption = $derived(getSelectedAlbumGroupOption(userSettings));
+  let groupedAlbums = $derived.by(() => {
     const groupFunc = groupOptions[albumGroupOption] ?? groupOptions[AlbumGroupBy.None];
-    groupedAlbums = groupFunc(stringToSortOrder(userSettings.groupOrder), filteredAlbums);
-  });
+    const groupedAlbums = groupFunc(stringToSortOrder(userSettings.groupOrder), filteredAlbums);
 
-  // Step 4: Sort albums amongst each group.
-  run(() => {
-    groupedAlbums = groupedAlbums.map((group) => ({
+    return groupedAlbums.map((group) => ({
       id: group.id,
       name: group.name,
       albums: sortAlbums(group.albums, { sortBy: userSettings.sortBy, orderBy: userSettings.sortOrder }),
     }));
+  });
+
+  let contextMenuPosition: ContextMenuPosition = $state({ x: 0, y: 0 });
+  let selectedAlbum: AlbumResponseDto | undefined = $state();
+  let isOpen = $state(false);
 
+  // TODO get rid of this
+  $effect(() => {
     albumGroupIds = groupedAlbums.map(({ id }) => id);
   });