From 384d3a0984eac72722438a3ec0774f94c2eed39e Mon Sep 17 00:00:00 2001
From: Freddie Floydd <freddiefloydd1@gmail.com>
Date: Sat, 18 Apr 2026 02:24:33 +0100
Subject: [PATCH] fix(web): fix stale album page load (#27825)

* invalidate album data on album update to fix stale page load

* invalidate album data on album update to fix stale page load

* factor out callback, make async and await invalidate

* chore: formatting

---------

Co-authored-by: Jason Rasmussen <jason@rasm.me>
---
 .../[[photos=photos]]/[[assetId=id]]/+page.svelte      | 10 ++++++++--
 .../[[photos=photos]]/[[assetId=id]]/+page.ts          |  5 ++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 4719b49689..3f9b0b04dd 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { goto, onNavigate } from '$app/navigation';
+  import { goto, invalidate, onNavigate } from '$app/navigation';
   import { scrollMemoryClearer } from '$lib/actions/scroll-memory';
   import AlbumDescription from './album-description.svelte';
   import AlbumMap from '$lib/components/album-page/album-map.svelte';
@@ -309,6 +309,12 @@
     album = { ...album, albumUsers };
   };
 
+  const onAlbumUpdate = async (newAlbum: AlbumResponseDto) => {
+    album = newAlbum;
+
+    await invalidate('album:data');
+  };
+
   const { Cast } = $derived(getGlobalActions($t));
   const { Share } = $derived(getAlbumActions($t, album));
   const { AddAssets, Upload } = $derived(getAlbumAssetsActions($t, album, timelineMultiSelectManager.assets));
@@ -330,7 +336,7 @@
   {onAlbumShare}
   {onAlbumUserUpdate}
   onAlbumUserDelete={refreshAlbum}
-  onAlbumUpdate={(newAlbum) => (album = newAlbum)}
+  {onAlbumUpdate}
 />
 <CommandPaletteDefaultProvider name={$t('album')} actions={[AddAssets, Upload, Close]} />
 
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.ts b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.ts
index 623c39b152..014f7f937f 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.ts
@@ -2,8 +2,11 @@ import { authenticate } from '$lib/utils/auth';
 import { getAlbumInfo } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
-export const load = (async ({ params, url }) => {
+export const load = (async ({ params, url, depends }) => {
   await authenticate(url);
+
+  depends('album:data');
+
   const album = await getAlbumInfo({ id: params.albumId });
 
   return {