fix comments

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

@@ -1,24 +1,37 @@
 <script lang="ts">
   import { ByteUnit } from '$lib/utils/byte-units';
-  import { Icon, LoadingSpinner, Text } from '@immich/ui';
+  import { Icon, Text } from '@immich/ui';
+
+  interface ValueData {
+    value: number;
+    unit?: ByteUnit | undefined;
+  }
 
   interface Props {
     icon: string;
     title: string;
-    value?: number;
-    unit?: ByteUnit | undefined;
+    valuePromise: Promise<ValueData>;
   }
 
-  let { icon, title, value = undefined, unit = undefined }: Props = $props();
+  let { icon, title, valuePromise }: Props = $props();
+  let isLoading = $state(true);
+  let data = $state<ValueData | null>(null);
+
+  $effect.pre(() => {
+    isLoading = true;
+    void valuePromise.then((result) => {
+      data = result;
+      isLoading = false;
+    });
+  });
 
   const zeros = $derived(() => {
-    if (value === undefined) {
-      return '';
-    }
     const maxLength = 13;
-    const valueLength = value.toString().length;
+    if (!data) {
+      return '0'.repeat(maxLength);
+    }
+    const valueLength = data.value.toString().length;
     const zeroLength = maxLength - valueLength;
-
     return '0'.repeat(zeroLength);
   });
 </script>
@@ -29,14 +42,26 @@
     <Text size="giant" fontWeight="medium">{title}</Text>
   </div>
 
-  <div class="mx-auto font-mono text-2xl font-medium">
-    {#if value === undefined}
-      <LoadingSpinner />
-    {:else}
-      <span class="text-gray-300 dark:text-gray-600">{zeros()}</span><span>{value}</span>
-      {#if unit}
-        <code class="font-mono text-base font-normal">{unit}</code>
-      {/if}
-    {/if}
+  <div class="mx-auto font-mono text-2xl font-medium relative">
+    <span class="text-gray-300 dark:text-gray-600" class:shimmer-text={isLoading}>{zeros()}</span
+    >{#if !isLoading && data}<span>{data.value}</span>
+      {#if data.unit}<code class="font-mono text-base font-normal">{data.unit}</code>{/if}{/if}
   </div>
 </div>
+
+<style>
+  .shimmer-text {
+    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 1) 100%);
+    mask-size: 200% 100%;
+    animation: shimmer 2.25s infinite linear;
+  }
+
+  @keyframes shimmer {
+    0% {
+      mask-position: 200% 0;
+    }
+    100% {
+      mask-position: -200% 0;
+    }
+  }
+</style>

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

@@ -19,10 +19,34 @@
   import { t } from 'svelte-i18n';
 
   type Props = {
-    stats: ServerStatsResponseDto;
+    statsPromise: Promise<ServerStatsResponseDto>;
   };
 
-  const { stats }: Props = $props();
+  const { statsPromise }: Props = $props();
+  let stats = $state<ServerStatsResponseDto | null>(null);
+
+  $effect.pre(() => {
+    void statsPromise.then((result) => {
+      stats = result;
+    });
+  });
+
+  const photosPromise = $derived.by(() => statsPromise.then((data) => ({ value: data.photos })));
+
+  const videosPromise = $derived.by(() => statsPromise.then((data) => ({ value: data.videos })));
+
+  const storagePromise = $derived.by(() =>
+    statsPromise.then((data) => {
+      const TiB = 1024 ** 4;
+      const [value, unit] = getBytesWithUnit(data.usage, data.usage > TiB ? 2 : 0);
+      return { value, unit };
+    }),
+  );
+
+  const storageUsageWithUnit = $derived.by(() => {
+    const TiB = 1024 ** 4;
+    return !stats ? ([0, ''] as const) : getBytesWithUnit(stats.usage, stats.usage > TiB ? 2 : 0);
+  });
 
   const zeros = (value: number, maxLength = 13) => {
     const valueLength = value.toString().length;
@@ -30,9 +54,6 @@
 
     return '0'.repeat(zeroLength);
   };
-
-  const TiB = 1024 ** 4;
-  let [statsUsage, statsUsageUnit] = $derived(getBytesWithUnit(stats.usage, stats.usage > TiB ? 2 : 0));
 </script>
 
 <div class="flex flex-col gap-5 my-4">
@@ -40,48 +61,52 @@
     <Text class="mb-2" fontWeight="medium">{$t('total_usage')}</Text>
 
     <div class="hidden justify-between lg:flex gap-4">
-      <StatsCard icon={mdiCameraIris} title={$t('photos')} value={stats.photos} />
-      <StatsCard icon={mdiPlayCircle} title={$t('videos')} value={stats.videos} />
-      <StatsCard icon={mdiChartPie} title={$t('storage')} value={statsUsage} unit={statsUsageUnit} />
+      <StatsCard icon={mdiCameraIris} title={$t('photos')} valuePromise={photosPromise} />
+      <StatsCard icon={mdiPlayCircle} title={$t('videos')} valuePromise={videosPromise} />
+      <StatsCard icon={mdiChartPie} title={$t('storage')} valuePromise={storagePromise} />
     </div>
 
     <div class="mt-5 flex lg:hidden">
-      <div class="flex flex-col justify-between rounded-3xl bg-subtle p-5 dark:bg-immich-dark-gray">
-        <div class="flex flex-wrap gap-x-12">
-          <div class="flex flex-1 place-items-center gap-4 text-primary">
-            <Icon icon={mdiCameraIris} size="25" />
-            <Text size="medium" fontWeight="medium">{$t('photos')}</Text>
-          </div>
+      {#if stats}
+        <div class="flex flex-col justify-between rounded-3xl bg-subtle p-5 dark:bg-immich-dark-gray">
+          <div class="flex flex-wrap gap-x-12">
+            <div class="flex flex-1 place-items-center gap-4 text-primary">
+              <Icon icon={mdiCameraIris} size="25" />
+              <Text size="medium" fontWeight="medium">{$t('photos')}</Text>
+            </div>
 
-          <div class="relative text-center font-mono text-2xl font-medium">
-            <span class="text-light-300">{zeros(stats.photos)}</span><span class="text-primary">{stats.photos}</span>
-          </div>
-        </div>
-        <div class="flex flex-wrap gap-x-12">
-          <div class="flex flex-1 place-items-center gap-4 text-primary">
-            <Icon icon={mdiPlayCircle} size="25" />
-            <Text size="medium" fontWeight="medium">{$t('videos')}</Text>
+            <div class="relative text-center font-mono text-2xl font-medium">
+              <span class="text-light-300">{zeros(stats.photos)}</span><span class="text-primary">{stats.photos}</span>
+            </div>
           </div>
+          <div class="flex flex-wrap gap-x-12">
+            <div class="flex flex-1 place-items-center gap-4 text-primary">
+              <Icon icon={mdiPlayCircle} size="25" />
+              <Text size="medium" fontWeight="medium">{$t('videos')}</Text>
+            </div>
 
-          <div class="relative text-center font-mono text-2xl font-medium">
-            <span class="text-light-300">{zeros(stats.videos)}</span><span class="text-primary">{stats.videos}</span>
-          </div>
-        </div>
-        <div class="flex flex-wrap gap-x-5">
-          <div class="flex flex-1 flex-nowrap place-items-center gap-4 text-primary">
-            <Icon icon={mdiChartPie} size="25" />
-            <Text size="medium" fontWeight="medium">{$t('storage')}</Text>
+            <div class="relative text-center font-mono text-2xl font-medium">
+              <span class="text-light-300">{zeros(stats.videos)}</span><span class="text-primary">{stats.videos}</span>
+            </div>
           </div>
+          <div class="flex flex-wrap gap-x-5">
+            <div class="flex flex-1 flex-nowrap place-items-center gap-4 text-primary">
+              <Icon icon={mdiChartPie} size="25" />
+              <Text size="medium" fontWeight="medium">{$t('storage')}</Text>
+            </div>
 
-          <div class="relative flex text-center font-mono text-2xl font-medium">
-            <span class="text-light-300">{zeros(statsUsage)}</span><span class="text-primary">{statsUsage}</span>
+            <div class="relative flex text-center font-mono text-2xl font-medium">
+              <span class="text-light-300">{zeros(storageUsageWithUnit[0])}</span><span class="text-primary"
+                >{storageUsageWithUnit[0]}</span
+              >
 
-            <div class="absolute -end-1.5 -bottom-4">
-              <Code color="muted" class="text-xs font-light font-mono">{statsUsageUnit}</Code>
+              <div class="absolute -end-1.5 -bottom-4">
+                <Code color="muted" class="text-xs font-light font-mono">{storageUsageWithUnit[1]}</Code>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      {/if}
     </div>
   </div>
 
@@ -95,34 +120,69 @@
         <TableHeading class="w-1/4">{$t('usage')}</TableHeading>
       </TableHeader>
       <TableBody class="block max-h-80 overflow-y-auto">
-        {#each stats.usageByUser as user (user.userId)}
-          <TableRow>
-            <TableCell class="w-1/4">{user.userName}</TableCell>
-            <TableCell class="w-1/4">
-              {user.photos.toLocaleString($locale)} (<FormatBytes bytes={user.usagePhotos} />)</TableCell
-            >
-            <TableCell class="w-1/4">
-              {user.videos.toLocaleString($locale)} (<FormatBytes bytes={user.usageVideos} precision={0} />)</TableCell
-            >
-            <TableCell class="w-1/4">
-              <FormatBytes bytes={user.usage} precision={0} />
-              {#if user.quotaSizeInBytes !== null}
-                / <FormatBytes bytes={user.quotaSizeInBytes} precision={0} />
-              {/if}
-              <span class="text-primary">
-                {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
-                  ({(user.quotaSizeInBytes === 0 ? 1 : user.usage / user.quotaSizeInBytes).toLocaleString($locale, {
-                    style: 'percent',
-                    maximumFractionDigits: 0,
-                  })})
-                {:else}
-                  ({$t('unlimited')})
+        {#if stats}
+          {#each stats.usageByUser as user (user.userId)}
+            <TableRow>
+              <TableCell class="w-1/4">{user.userName}</TableCell>
+              <TableCell class="w-1/4">
+                {user.photos.toLocaleString($locale)} (<FormatBytes bytes={user.usagePhotos} />)</TableCell
+              >
+              <TableCell class="w-1/4">
+                {user.videos.toLocaleString($locale)} (<FormatBytes
+                  bytes={user.usageVideos}
+                  precision={0}
+                />)</TableCell
+              >
+              <TableCell class="w-1/4">
+                <FormatBytes bytes={user.usage} precision={0} />
+                {#if user.quotaSizeInBytes !== null}
+                  / <FormatBytes bytes={user.quotaSizeInBytes} precision={0} />
                 {/if}
-              </span>
-            </TableCell>
-          </TableRow>
-        {/each}
+                <span class="text-primary">
+                  {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
+                    ({(user.quotaSizeInBytes === 0 ? 1 : user.usage / user.quotaSizeInBytes).toLocaleString($locale, {
+                      style: 'percent',
+                      maximumFractionDigits: 0,
+                    })})
+                  {:else}
+                    ({$t('unlimited')})
+                  {/if}
+                </span>
+              </TableCell>
+            </TableRow>
+          {/each}
+        {:else}
+          {#each Array(5) as _, i (i)}
+            <TableRow>
+              <TableCell class="w-1/4"><span class="loading-shimmer inline-block h-4 w-20 rounded" /></TableCell>
+              <TableCell class="w-1/4"><span class="loading-shimmer inline-block h-4 w-16 rounded" /></TableCell>
+              <TableCell class="w-1/4"><span class="loading-shimmer inline-block h-4 w-16 rounded" /></TableCell>
+              <TableCell class="w-1/4"><span class="loading-shimmer inline-block h-4 w-24 rounded" /></TableCell>
+            </TableRow>
+          {/each}
+        {/if}
       </TableBody>
     </Table>
   </div>
 </div>
+
+<style>
+  .loading-shimmer {
+    background: linear-gradient(90deg, rgb(107, 114, 128) 0%, rgb(75, 85, 99) 50%, rgb(107, 114, 128) 100%);
+    background-size: 200% 100%;
+    animation: shimmer-load 1.5s infinite linear;
+  }
+
+  :global(.dark) .loading-shimmer {
+    background: linear-gradient(90deg, rgb(63, 63, 70) 0%, rgb(48, 48, 54) 50%, rgb(63, 63, 70) 100%);
+  }
+
+  @keyframes shimmer-load {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+</style>

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

@@ -116,29 +116,29 @@
                 <TableCell class={classes.column2}>
                   <Link href={Route.viewUser(owner)}>{owner.name}</Link>
                 </TableCell>
-                <TableCell class={classes.column3}>
-                  {#if stats}
+                {#if stats}
+                  <TableCell class={classes.column3}>
                     {stats.photos.toLocaleString($locale)}
-                  {:else}
-                    <LoadingSpinner />
-                  {/if}
-                </TableCell>
-                <TableCell class={classes.column4}>
-                  {#if stats}
+                  </TableCell>
+                  <TableCell class={classes.column4}>
                     {stats.videos.toLocaleString($locale)}
-                  {:else}
-                    <LoadingSpinner />
-                  {/if}
-                </TableCell>
-                <TableCell class={classes.column5}>
-                  {#if stats}
+                  </TableCell>
+                  <TableCell class={classes.column5}>
                     {@const [diskUsage, diskUsageUnit] = getBytesWithUnit(stats.usage, 0)}
                     {diskUsage}
                     {diskUsageUnit}
-                  {:else}
+                  </TableCell>
+                {:else}
+                  <TableCell class={classes.column3}>
                     <LoadingSpinner />
-                  {/if}
-                </TableCell>
+                  </TableCell>
+                  <TableCell class={classes.column4}>
+                    <LoadingSpinner />
+                  </TableCell>
+                  <TableCell class={classes.column5}>
+                    <LoadingSpinner />
+                  </TableCell>
+                {/if}
                 <TableCell class={classes.column6}>
                   <ContextMenuButton color="primary" aria-label={$t('open')} items={getActionsForLibrary(library)} />
                 </TableCell>

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

@@ -14,7 +14,6 @@
     getLibraryExclusionPatternActions,
     getLibraryFolderActions,
   } from '$lib/services/library.service';
-  import type { ByteUnit } from '$lib/utils/byte-units';
   import { getBytesWithUnit } from '$lib/utils/byte-units';
 
   import type { LibraryResponseDto, LibraryStatsResponseDto } from '@immich/sdk';
@@ -36,40 +35,28 @@
     data: LayoutData;
   };
 
-  const { children, data }: Props = $props();
+  let { children, data }: Props = $props();
+  const statisticsPromise = $derived.by(() => data.statisticsPromise as Promise<LibraryStatsResponseDto>);
 
-  let statistics = $state<LibraryStatsResponseDto | undefined>(undefined);
-  let storageUsage = $state<number | undefined>(undefined);
-  let unit = $state<ByteUnit | undefined>(undefined);
+  const photosPromise = $derived.by(() => statisticsPromise.then((stats) => ({ value: stats.photos })));
 
-  $effect(() => {
-    if (statistics) {
-      const [usage, u] = getBytesWithUnit(statistics.usage);
-      storageUsage = usage;
-      unit = u;
-    } else {
-      storageUsage = undefined;
-      unit = undefined;
-    }
-  });
+  const videosPromise = $derived.by(() => statisticsPromise.then((stats) => ({ value: stats.videos })));
 
-  const loadStatistics = async () => {
-    try {
-      statistics = await data.statisticsPromise;
-    } catch (error) {
-      console.error('Failed to load statistics:', error);
-    }
-  };
+  const usagePromise = $derived.by(() =>
+    statisticsPromise.then((stats) => {
+      const [value, unit] = getBytesWithUnit(stats.usage);
+      return { value, unit };
+    }),
+  );
 
-  $effect(() => {
-    void loadStatistics();
-  });
+  const offlinePromise = $derived.by(() => statisticsPromise.then((stats) => ({ value: stats.offline })));
 
-  let library = $state(data.library);
+  let updatedLibrary = $state<LibraryResponseDto | undefined>(undefined);
+  const library = $derived.by(() => (updatedLibrary?.id === data.library.id ? updatedLibrary : data.library));
 
   const onLibraryUpdate = (newLibrary: LibraryResponseDto) => {
     if (newLibrary.id === library.id) {
-      library = newLibrary;
+      updatedLibrary = newLibrary;
     }
   };
 
@@ -94,9 +81,9 @@
     <div class="grid gap-4 grid-cols-1 lg:grid-cols-2 w-full">
       <Heading tag="h1" size="large" class="col-span-full my-4">{library.name}</Heading>
       <div class="flex flex-col lg:flex-row gap-4 col-span-full">
-        <ServerStatisticsCard icon={mdiCameraIris} title={$t('photos')} value={statistics?.photos} />
-        <ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} value={statistics?.videos} />
-        <ServerStatisticsCard icon={mdiChartPie} title={$t('usage')} value={storageUsage} {unit} />
+        <ServerStatisticsCard icon={mdiCameraIris} title={$t('photos')} valuePromise={photosPromise} />
+        <ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} valuePromise={videosPromise} />
+        <ServerStatisticsCard icon={mdiChartPie} title={$t('usage')} valuePromise={usagePromise} />
       </div>
 
       <AdminCard icon={mdiFolderOutline} title={$t('folders')} headerAction={AddFolder}>
@@ -147,7 +134,7 @@
       </AdminCard>
 
       <div class="flex flex-col lg:flex-row gap-4">
-        <ServerStatisticsCard icon={mdiFileDocumentRemoveOutline} title={$t('offline')} value={statistics?.offline} />
+        <ServerStatisticsCard icon={mdiFileDocumentRemoveOutline} title={$t('offline')} valuePromise={offlinePromise} />
       </div>
     </div>
     {@render children?.()}

web/src/routes/admin/server-status/+page.svelte

@@ -2,7 +2,7 @@
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import ServerStatisticsPanel from '$lib/components/server-statistics/ServerStatisticsPanel.svelte';
   import { getServerStatistics, type ServerStatsResponseDto } from '@immich/sdk';
-  import { Container, LoadingSpinner } from '@immich/ui';
+  import { Container } from '@immich/ui';
   import { onMount } from 'svelte';
   import type { PageData } from './$types';
 
@@ -14,20 +14,18 @@
 
   let stats = $state<ServerStatsResponseDto | undefined>(undefined);
 
-  const loadStatistics = async () => {
-    try {
-      stats = await data.statsPromise;
-    } catch (error) {
-      console.error('Failed to load server statistics:', error);
+  const statsPromise = $derived.by(() => {
+    if (stats) {
+      return Promise.resolve(stats);
     }
-  };
+    return data.statsPromise;
+  });
 
   const updateStatistics = async () => {
     stats = await getServerStatistics();
   };
 
   onMount(() => {
-    void loadStatistics();
     const interval = setInterval(() => void updateStatistics(), 5000);
 
     return () => clearInterval(interval);
@@ -36,10 +34,6 @@
 
 <AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
   <Container size="large" center>
-    {#if stats}
-      <ServerStatisticsPanel {stats} />
-    {:else}
-      <LoadingSpinner />
-    {/if}
+    <ServerStatisticsPanel {statsPromise} />
   </Container>
 </AdminPageLayout>