fix Daniel's comments

web/src/lib/components/server-statistics/ServerStatisticsCard.svelte

@@ -2,10 +2,10 @@
   import { ByteUnit } from '$lib/utils/byte-units';
   import { Icon, Text } from '@immich/ui';
 
-  interface ValueData {
+  type ValueData = {
     value: number;
     unit?: ByteUnit | undefined;
-  }
+  };
 
   interface Props {
     icon: string;
@@ -38,7 +38,9 @@
   {:then data}
     <div class="mx-auto font-mono text-2xl font-medium relative">
       <span class="text-gray-300 dark:text-gray-600">{zeros(data)}</span><span>{data.value}</span>
-      {#if data.unit}<code class="font-mono text-base font-normal">{data.unit}</code>{/if}
+      {#if data.unit}
+        <code class="font-mono text-base font-normal">{data.unit}</code>
+      {/if}
     </div>
   {:catch _}
     <div class="mx-auto font-mono text-2xl font-medium relative">

web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte

@@ -49,8 +49,9 @@
     return '0'.repeat(zeroLength);
   };
 
-  const getUserStatsPromise = (userId: string) => {
-    return statsPromise.then((stats) => stats.usageByUser.find((userStats) => userStats.userId === userId));
+  const getUserStatsPromise = async (userId: string) => {
+    const stats = await statsPromise;
+    return stats.usageByUser.find((userStats) => userStats.userId === userId);
   };
 </script>
 
@@ -179,8 +180,6 @@
               {:else}
                 {@render placeholder()}
               {/if}
-            {:catch}
-              {@render placeholder()}
             {/await}
           </TableRow>
         {/each}

web/src/routes/admin/library-management/(list)/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
+  import { goto, invalidate } from '$app/navigation';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
@@ -7,13 +7,7 @@
   import { getLibrariesActions, getLibraryActions } from '$lib/services/library.service';
   import { locale } from '$lib/stores/preferences.store';
   import { getBytesWithUnit } from '$lib/utils/byte-units';
-  import {
-    getLibrary,
-    getLibraryStatistics,
-    type LibraryResponseDto,
-    type LibraryStatsResponseDto,
-    type UserAdminResponseDto,
-  } from '@immich/sdk';
+  import { type LibraryResponseDto } from '@immich/sdk';
   import {
     CommandPaletteDefaultProvider,
     Container,
@@ -39,41 +33,15 @@
 
   const props: Props = $props();
 
-  let libraries = $state<LibraryResponseDto[]>([]);
-  let statistics = $state<Record<string, LibraryStatsResponseDto>>({});
-  let owners = $state<Record<string, UserAdminResponseDto>>({});
+  let libraries = $derived([...props.data.libraries]);
+  let owners = $derived({ ...props.data.owners });
 
-  $effect(() => {
-    libraries = [...props.data.libraries];
-    owners = { ...props.data.owners };
-  });
-
-  const onLibraryCreate = (library: LibraryResponseDto) => {
-    void goto(Route.viewLibrary(library));
+  const onLibraryCreate = async (library: LibraryResponseDto) => {
+    await goto(Route.viewLibrary(library));
   };
 
-  const onLibraryUpdate = (library: LibraryResponseDto) => {
-    const index = libraries.findIndex(({ id }) => id === library.id);
-
-    if (index === -1) {
-      return;
-    }
-
-    void Promise.all([getLibrary({ id: library.id }), getLibraryStatistics({ id: library.id })])
-      .then(([updatedLibrary, updatedStats]) => {
-        libraries[index] = updatedLibrary;
-        statistics[library.id] = updatedStats;
-      })
-      .catch((error) => {
-        console.error(`Failed to refresh library after update: ${error}`);
-      });
-  };
-
-  const onLibraryDelete = ({ id }: { id: string }) => {
-    libraries = libraries.filter((library) => library.id !== id);
-    delete statistics[id];
-    delete owners[id];
-  };
+  const onLibraryUpdate = () => invalidate('app:libraries');
+  const onLibraryDelete = () => invalidate('app:libraries');
 
   const { Create, ScanAll } = $derived(getLibrariesActions($t));
 
@@ -130,7 +98,7 @@
                     <span class="skeleton-loader inline-block h-4 w-20"></span>
                   </TableCell>
                 {:then loadedStats}
-                  {@const stats = statistics[library.id] || loadedStats[library.id]}
+                  {@const stats = loadedStats[library.id]}
                   <TableCell class={classes.column3}>
                     {stats.photos.toLocaleString($locale)}
                   </TableCell>

web/src/routes/admin/library-management/(list)/+layout.ts

@@ -3,7 +3,8 @@ import { getFormatter } from '$lib/utils/i18n';
 import { getAllLibraries, getLibraryStatistics, getUserAdmin, searchUsersAdmin } from '@immich/sdk';
 import type { LayoutLoad } from './$types';
 
-export const load = (async ({ url }) => {
+export const load = (async ({ url, depends }) => {
+  depends('app:libraries');
   await authenticate(url, { admin: true });
   await requestServerInfo();
   const allUsers = await searchUsersAdmin({ withDeleted: false });

web/src/routes/admin/library-management/[id]/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
+  import { goto, invalidate } from '$app/navigation';
   import emptyFoldersUrl from '$lib/assets/empty-folders.svg';
   import AdminCard from '$lib/components/AdminCard.svelte';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
@@ -16,7 +16,6 @@
   } from '$lib/services/library.service';
   import { getBytesWithUnit } from '$lib/utils/byte-units';
 
-  import type { LibraryResponseDto } from '@immich/sdk';
   import { Code, CommandPaletteDefaultProvider, Container, Heading, modalManager } from '@immich/ui';
   import { mdiCameraIris, mdiChartPie, mdiFilterMinusOutline, mdiFolderOutline, mdiPlayCircle } from '@mdi/js';
   import type { Snippet } from 'svelte';
@@ -29,27 +28,21 @@
   };
 
   let { children, data }: Props = $props();
-  const statisticsPromise = $derived.by(() => data.statisticsPromise);
 
-  const photosPromise = $derived.by(() => statisticsPromise.then((stats) => ({ value: stats.photos })));
+  const photosPromise = $derived(data.statisticsPromise.then((stats) => ({ value: stats.photos })));
 
-  const videosPromise = $derived.by(() => statisticsPromise.then((stats) => ({ value: stats.videos })));
+  const videosPromise = $derived(data.statisticsPromise.then((stats) => ({ value: stats.videos })));
 
-  const usagePromise = $derived.by(() =>
-    statisticsPromise.then((stats) => {
+  const usagePromise = $derived(
+    data.statisticsPromise.then((stats) => {
       const [value, unit] = getBytesWithUnit(stats.usage);
       return { value, unit };
     }),
   );
 
-  let updatedLibrary = $state<LibraryResponseDto | undefined>(undefined);
-  const library = $derived.by(() => (updatedLibrary?.id === data.library.id ? updatedLibrary : data.library));
+  const library = $derived(data.library);
 
-  const onLibraryUpdate = (newLibrary: LibraryResponseDto) => {
-    if (newLibrary.id === library.id) {
-      updatedLibrary = newLibrary;
-    }
-  };
+  const onLibraryUpdate = () => invalidate('app:library');
 
   const onLibraryDelete = ({ id }: { id: string }) => {
     if (id === library.id) {

web/src/routes/admin/library-management/[id]/+layout.ts

@@ -5,7 +5,8 @@ import { getLibrary, getLibraryStatistics, type LibraryResponseDto } from '@immi
 import { redirect } from '@sveltejs/kit';
 import type { LayoutLoad } from './$types';
 
-export const load = (async ({ params: { id }, url }) => {
+export const load = (async ({ params: { id }, url, depends }) => {
+  depends('app:library');
   await authenticate(url, { admin: true });
 
   let library: LibraryResponseDto;