fix comments

mobile/openapi/lib/model/library_stats_response_dto.dart

@@ -13,16 +13,12 @@ part of openapi.api;
 class LibraryStatsResponseDto {
   /// Returns a new [LibraryStatsResponseDto] instance.
   LibraryStatsResponseDto({
-    this.offline = 0,
     this.photos = 0,
     this.total = 0,
     this.usage = 0,
     this.videos = 0,
   });
 
-  /// Number of offline assets
-  int offline;
-
   /// Number of photos
   int photos;
 
@@ -37,7 +33,6 @@ class LibraryStatsResponseDto {
 
   @override
   bool operator ==(Object other) => identical(this, other) || other is LibraryStatsResponseDto &&
-    other.offline == offline &&
     other.photos == photos &&
     other.total == total &&
     other.usage == usage &&
@@ -46,18 +41,16 @@ class LibraryStatsResponseDto {
   @override
   int get hashCode =>
     // ignore: unnecessary_parenthesis
-    (offline.hashCode) +
     (photos.hashCode) +
     (total.hashCode) +
     (usage.hashCode) +
     (videos.hashCode);
 
   @override
-  String toString() => 'LibraryStatsResponseDto[offline=$offline, photos=$photos, total=$total, usage=$usage, videos=$videos]';
+  String toString() => 'LibraryStatsResponseDto[photos=$photos, total=$total, usage=$usage, videos=$videos]';
 
   Map<String, dynamic> toJson() {
     final json = <String, dynamic>{};
-      json[r'offline'] = this.offline;
       json[r'photos'] = this.photos;
       json[r'total'] = this.total;
       json[r'usage'] = this.usage;
@@ -74,7 +67,6 @@ class LibraryStatsResponseDto {
       final json = value.cast<String, dynamic>();
 
       return LibraryStatsResponseDto(
-        offline: mapValueOfType<int>(json, r'offline')!,
         photos: mapValueOfType<int>(json, r'photos')!,
         total: mapValueOfType<int>(json, r'total')!,
         usage: mapValueOfType<int>(json, r'usage')!,
@@ -126,7 +118,6 @@ class LibraryStatsResponseDto {
 
   /// The list of required keys that must be present in a JSON.
   static const requiredKeys = <String>{
-    'offline',
     'photos',
     'total',
     'usage',

open-api/immich-openapi-specs.json

@@ -18264,11 +18264,6 @@
       },
       "LibraryStatsResponseDto": {
         "properties": {
-          "offline": {
-            "default": 0,
-            "description": "Number of offline assets",
-            "type": "integer"
-          },
           "photos": {
             "default": 0,
             "description": "Number of photos",
@@ -18292,7 +18287,6 @@
           }
         },
         "required": [
-          "offline",
           "photos",
           "total",
           "usage",

open-api/typescript-sdk/src/fetch-client.ts

@@ -1323,8 +1323,6 @@ export type UpdateLibraryDto = {
     name?: string;
 };
 export type LibraryStatsResponseDto = {
-    /** Number of offline assets */
-    offline: number;
     /** Number of photos */
     photos: number;
     /** Total number of assets */

server/src/dtos/library.dto.ts

@@ -136,9 +136,6 @@ export class LibraryStatsResponseDto {
   @ApiProperty({ type: 'integer', description: 'Total number of assets' })
   total = 0;
 
-  @ApiProperty({ type: 'integer', description: 'Number of offline assets' })
-  offline = 0;
-
   @ApiProperty({ type: 'integer', format: 'int64', description: 'Storage usage in bytes' })
   usage = 0;
 }

server/src/queries/library.repository.sql

@@ -36,37 +36,27 @@ select
       (
         "asset"."type" = $1
         and "asset"."visibility" != $2
-        and "asset"."isOffline" = $3
       )
   ) as "photos",
   count(*) filter (
     where
       (
-        "asset"."type" = $4
+        "asset"."type" = $3
-        and "asset"."visibility" != $5
+        and "asset"."visibility" != $4
-        and "asset"."isOffline" = $6
       )
   ) as "videos",
-  count(*) filter (
+  coalesce(sum("asset_exif"."fileSizeInByte"), $5) as "usage"
-    where
-      (
-        "asset"."isOffline" = $7
-        and "asset"."visibility" != $8
-      )
-  ) as "offline",
-  coalesce(sum("asset_exif"."fileSizeInByte"), $9) as "usage"
 from
   "library"
   inner join "asset" on "asset"."libraryId" = "library"."id"
   left join "asset_exif" on "asset_exif"."assetId" = "asset"."id"
 where
-  "library"."id" = $10
+  "library"."id" = $6
 group by
   "library"."id"
 select
   0::int as "photos",
   0::int as "videos",
-  0::int as "offline",
   0::int as "usage",
   0::int as "total"
 from

server/src/repositories/library.repository.ts

@@ -79,11 +79,7 @@ export class LibraryRepository {
         eb.fn
           .countAll<number>()
           .filterWhere((eb) =>
-            eb.and([
+            eb.and([eb('asset.type', '=', AssetType.Image), eb('asset.visibility', '!=', AssetVisibility.Hidden)]),
-              eb('asset.type', '=', AssetType.Image),
-              eb('asset.visibility', '!=', AssetVisibility.Hidden),
-              eb('asset.isOffline', '=', false),
-            ]),
           )
           .as('photos'),
       )
@@ -91,22 +87,10 @@ export class LibraryRepository {
         eb.fn
           .countAll<number>()
           .filterWhere((eb) =>
-            eb.and([
+            eb.and([eb('asset.type', '=', AssetType.Video), eb('asset.visibility', '!=', AssetVisibility.Hidden)]),
-              eb('asset.type', '=', AssetType.Video),
-              eb('asset.visibility', '!=', AssetVisibility.Hidden),
-              eb('asset.isOffline', '=', false),
-            ]),
           )
           .as('videos'),
       )
-      .select((eb) =>
-        eb.fn
-          .countAll<number>()
-          .filterWhere((eb) =>
-            eb.and([eb('asset.isOffline', '=', true), eb('asset.visibility', '!=', AssetVisibility.Hidden)]),
-          )
-          .as('offline'),
-      )
       .select((eb) => eb.fn.coalesce((eb) => eb.fn.sum('asset_exif.fileSizeInByte'), eb.val(0)).as('usage'))
       .groupBy('library.id')
       .where('library.id', '=', id)
@@ -119,7 +103,6 @@ export class LibraryRepository {
         .selectFrom('library')
         .select(zero.as('photos'))
         .select(zero.as('videos'))
-        .select(zero.as('offline'))
         .select(zero.as('usage'))
         .select(zero.as('total'))
         .where('library.id', '=', id)
@@ -129,7 +112,6 @@ export class LibraryRepository {
     return {
       photos: stats.photos,
       videos: stats.videos,
-      offline: stats.offline,
       usage: stats.usage,
       total: stats.photos + stats.videos,
     };

server/src/services/library.service.spec.ts

@@ -681,19 +681,12 @@ describe(LibraryService.name, () => {
     it('should return library statistics', async () => {
       const library = factory.library();
 
-      mocks.library.getStatistics.mockResolvedValue({
+      mocks.library.getStatistics.mockResolvedValue({ photos: 10, videos: 0, total: 10, usage: 1337 });
-        photos: 10,
-        videos: 0,
-        total: 10,
-        usage: 1337,
-        offline: 67,
-      });
       await expect(sut.getStatistics(library.id)).resolves.toEqual({
         photos: 10,
         videos: 0,
         total: 10,
         usage: 1337,
-        offline: 67,
       });
 
       expect(mocks.library.getStatistics).toHaveBeenCalledWith(library.id);

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

@@ -1,26 +1,28 @@
 <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;
+    valuePromise: Promise<ValueData>;
-    unit?: ByteUnit | undefined;
   }
 
-  let { icon, title, value = undefined, unit = undefined }: Props = $props();
+  let { icon, title, valuePromise }: Props = $props();
-
+  const zeros = (data?: ValueData) => {
-  const zeros = $derived(() => {
+    let length = 13;
-    if (value === undefined) {
+    if (data) {
-      return '';
+      const valueLength = data.value.toString().length;
+      length = length - valueLength;
     }
-    const maxLength = 13;
-    const valueLength = value.toString().length;
-    const zeroLength = maxLength - valueLength;
 
-    return '0'.repeat(zeroLength);
+    return '0'.repeat(length);
-  });
+  };
 </script>
 
 <div class="flex h-35 w-full flex-col justify-between rounded-3xl bg-subtle text-primary p-5">
@@ -29,14 +31,35 @@
     <Text size="giant" fontWeight="medium">{title}</Text>
   </div>
 
-  <div class="mx-auto font-mono text-2xl font-medium">
+  {#await valuePromise}
-    {#if value === undefined}
+    <div class="mx-auto font-mono text-2xl font-medium relative">
-      <LoadingSpinner />
+      <span class="text-gray-300 dark:text-gray-600 shimmer-text">{zeros()}</span>
-    {:else}
+    </div>
-      <span class="text-gray-300 dark:text-gray-600">{zeros()}</span><span>{value}</span>
+  {:then data}
-      {#if unit}
+    <div class="mx-auto font-mono text-2xl font-medium relative">
-        <code class="font-mono text-base font-normal">{unit}</code>
+      <span class="text-gray-300 dark:text-gray-600">{zeros(data)}</span><span>{data.value}</span>
-      {/if}
+      {#if data.unit}<code class="font-mono text-base font-normal">{data.unit}</code>{/if}
-    {/if}
+    </div>
-  </div>
+  {:catch _}
+    <div class="mx-auto font-mono text-2xl font-medium relative">
+      <span class="text-gray-300 dark:text-gray-600">{zeros()}</span>
+    </div>
+  {/await}
 </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 {
+    from {
+      mask-position: 200% 0;
+    }
+    to {
+      mask-position: -200% 0;
+    }
+  }
+</style>

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import StatsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
+  import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { getBytesWithUnit } from '$lib/utils/byte-units';
-  import type { ServerStatsResponseDto } from '@immich/sdk';
+  import type { ServerStatsResponseDto, UserAdminResponseDto } from '@immich/sdk';
   import {
     Code,
     FormatBytes,
@@ -19,10 +19,28 @@
   import { t } from 'svelte-i18n';
 
   type Props = {
-    stats: ServerStatsResponseDto;
+    statsPromise: Promise<ServerStatsResponseDto>;
+    users: UserAdminResponseDto[];
   };
 
-  const { stats }: Props = $props();
+  const { statsPromise, users }: Props = $props();
+
+  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 getStorageUsageWithUnit = (usage: number) => {
+    const TiB = 1024 ** 4;
+    return getBytesWithUnit(usage, usage > TiB ? 2 : 0);
+  };
 
   const zeros = (value: number, maxLength = 13) => {
     const valueLength = value.toString().length;
@@ -31,18 +49,25 @@
     return '0'.repeat(zeroLength);
   };
 
-  const TiB = 1024 ** 4;
+  const getUserStatsPromise = (userId: string) => {
-  let [statsUsage, statsUsageUnit] = $derived(getBytesWithUnit(stats.usage, stats.usage > TiB ? 2 : 0));
+    return statsPromise.then((stats) => stats.usageByUser.find((userStats) => userStats.userId === userId));
+  };
 </script>
 
+{#snippet placeholder()}
+  <TableCell class="w-1/4"><span class="skeleton-loader inline-block h-4 w-16"></span></TableCell>
+  <TableCell class="w-1/4"><span class="skeleton-loader inline-block h-4 w-16"></span></TableCell>
+  <TableCell class="w-1/4"><span class="skeleton-loader inline-block h-4 w-24"></span></TableCell>
+{/snippet}
+
 <div class="flex flex-col gap-5 my-4">
   <div>
     <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} />
+      <ServerStatisticsCard icon={mdiCameraIris} title={$t('photos')} valuePromise={photosPromise} />
-      <StatsCard icon={mdiPlayCircle} title={$t('videos')} value={stats.videos} />
+      <ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} valuePromise={videosPromise} />
-      <StatsCard icon={mdiChartPie} title={$t('storage')} value={statsUsage} unit={statsUsageUnit} />
+      <ServerStatisticsCard icon={mdiChartPie} title={$t('storage')} valuePromise={storagePromise} />
     </div>
 
     <div class="mt-5 flex lg:hidden">
@@ -54,7 +79,13 @@
           </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>
+            {#await statsPromise}
+              <span class="text-gray-300 dark:text-gray-600 shimmer-text">{zeros(0)}</span>
+            {:then stats}
+              <span class="text-light-300">{zeros(stats.photos)}</span><span class="text-primary">{stats.photos}</span>
+            {:catch}
+              <span class="text-gray-300 dark:text-gray-600">{zeros(0)}</span>
+            {/await}
           </div>
         </div>
         <div class="flex flex-wrap gap-x-12">
@@ -64,7 +95,13 @@
           </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>
+            {#await statsPromise}
+              <span class="text-gray-300 dark:text-gray-600 shimmer-text">{zeros(0)}</span>
+            {:then stats}
+              <span class="text-light-300">{zeros(stats.videos)}</span><span class="text-primary">{stats.videos}</span>
+            {:catch}
+              <span class="text-gray-300 dark:text-gray-600">{zeros(0)}</span>
+            {/await}
           </div>
         </div>
         <div class="flex flex-wrap gap-x-5">
@@ -74,11 +111,20 @@
           </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>
+            {#await statsPromise}
+              <span class="text-gray-300 dark:text-gray-600 shimmer-text">{zeros(0)}</span>
+            {:then stats}
+              {@const storageUsageWithUnit = getStorageUsageWithUnit(stats.usage)}
+              <span class="text-light-300">{zeros(storageUsageWithUnit[0])}</span><span class="text-primary"
+                >{storageUsageWithUnit[0]}</span
+              >
 
-            <div class="absolute -end-1.5 -bottom-4">
+              <div class="absolute -end-1.5 -bottom-4">
-              <Code color="muted" class="text-xs font-light font-mono">{statsUsageUnit}</Code>
+                <Code color="muted" class="text-xs font-light font-mono">{storageUsageWithUnit[1]}</Code>
-            </div>
+              </div>
+            {:catch}
+              <span class="text-gray-300 dark:text-gray-600">{zeros(0)}</span>
+            {/await}
           </div>
         </div>
       </div>
@@ -95,34 +141,99 @@
         <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)}
+        {#each users as user (user.id)}
           <TableRow>
-            <TableCell class="w-1/4">{user.userName}</TableCell>
+            <TableCell class="w-1/4">{user.name}</TableCell>
-            <TableCell class="w-1/4">
+            {#await getUserStatsPromise(user.id)}
-              {user.photos.toLocaleString($locale)} (<FormatBytes bytes={user.usagePhotos} />)</TableCell
+              {@render placeholder()}
-            >
+            {:then userStats}
-            <TableCell class="w-1/4">
+              {#if userStats}
-              {user.videos.toLocaleString($locale)} (<FormatBytes bytes={user.usageVideos} precision={0} />)</TableCell
+                <TableCell class="w-1/4">
-            >
+                  {userStats.photos.toLocaleString($locale)} (<FormatBytes bytes={userStats.usagePhotos} />)</TableCell
-            <TableCell class="w-1/4">
+                >
-              <FormatBytes bytes={user.usage} precision={0} />
+                <TableCell class="w-1/4">
-              {#if user.quotaSizeInBytes !== null}
+                  {userStats.videos.toLocaleString($locale)} (<FormatBytes
-                / <FormatBytes bytes={user.quotaSizeInBytes} precision={0} />
+                    bytes={userStats.usageVideos}
+                    precision={0}
+                  />)</TableCell
+                >
+                <TableCell class="w-1/4">
+                  <FormatBytes bytes={userStats.usage} precision={0} />
+                  {#if userStats.quotaSizeInBytes !== null}
+                    / <FormatBytes bytes={userStats.quotaSizeInBytes} precision={0} />
+                  {/if}
+                  <span class="text-primary">
+                    {#if userStats.quotaSizeInBytes !== null && userStats.quotaSizeInBytes >= 0}
+                      ({(userStats.quotaSizeInBytes === 0
+                        ? 1
+                        : userStats.usage / userStats.quotaSizeInBytes
+                      ).toLocaleString($locale, {
+                        style: 'percent',
+                        maximumFractionDigits: 0,
+                      })})
+                    {:else}
+                      ({$t('unlimited')})
+                    {/if}
+                  </span>
+                </TableCell>
+              {:else}
+                {@render placeholder()}
               {/if}
-              <span class="text-primary">
+            {:catch}
-                {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
+              {@render placeholder()}
-                  ({(user.quotaSizeInBytes === 0 ? 1 : user.usage / user.quotaSizeInBytes).toLocaleString($locale, {
+            {/await}
-                    style: 'percent',
-                    maximumFractionDigits: 0,
-                  })})
-                {:else}
-                  ({$t('unlimited')})
-                {/if}
-              </span>
-            </TableCell>
           </TableRow>
         {/each}
       </TableBody>
     </Table>
   </div>
 </div>
+
+<style>
+  .skeleton-loader {
+    position: relative;
+    border-radius: 4px;
+    overflow: hidden;
+    background-color: rgba(156, 163, 175, 0.35);
+  }
+
+  .skeleton-loader::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-repeat: no-repeat;
+    background-image: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 0.8) 50%,
+      rgba(255, 255, 255, 0)
+    );
+    background-size: 200% 100%;
+    background-position: 200% 0;
+    animation: skeleton-animation 2000ms infinite;
+  }
+
+  @keyframes skeleton-animation {
+    from {
+      background-position: 200% 0;
+    }
+    to {
+      background-position: -200% 0;
+    }
+  }
+
+  .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 {
+    from {
+      mask-position: 200% 0;
+    }
+    to {
+      mask-position: -200% 0;
+    }
+  }
+</style>

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

@@ -7,13 +7,18 @@
   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 } from '@immich/sdk';
+  import {
+    getLibrary,
+    getLibraryStatistics,
+    type LibraryResponseDto,
+    type LibraryStatsResponseDto,
+    type UserAdminResponseDto,
+  } from '@immich/sdk';
   import {
     CommandPaletteDefaultProvider,
     Container,
     ContextMenuButton,
     Link,
-    LoadingSpinner,
     MenuItemType,
     Table,
     TableBody,
@@ -32,37 +37,36 @@
     data: LayoutData;
   };
 
-  let { children, data }: Props = $props();
+  const props: Props = $props();
 
-  let libraries = $state(data.libraries);
+  let libraries = $state<LibraryResponseDto[]>([]);
   let statistics = $state<Record<string, LibraryStatsResponseDto>>({});
-  let owners = $state(data.owners);
+  let owners = $state<Record<string, UserAdminResponseDto>>({});
-
-  const loadStatistics = async () => {
-    try {
-      statistics = await data.statisticsPromise;
-    } catch (error) {
-      console.error('Failed to load library statistics:', error);
-    }
-  };
 
   $effect(() => {
-    void loadStatistics();
+    libraries = [...props.data.libraries];
+    owners = { ...props.data.owners };
   });
 
-  const onLibraryCreate = async (library: LibraryResponseDto) => {
+  const onLibraryCreate = (library: LibraryResponseDto) => {
-    await goto(Route.viewLibrary(library));
+    void goto(Route.viewLibrary(library));
   };
 
-  const onLibraryUpdate = async (library: LibraryResponseDto) => {
+  const onLibraryUpdate = (library: LibraryResponseDto) => {
     const index = libraries.findIndex(({ id }) => id === library.id);
 
     if (index === -1) {
       return;
     }
 
-    libraries[index] = await getLibrary({ id: library.id });
+    void Promise.all([getLibrary({ id: library.id }), getLibraryStatistics({ id: library.id })])
-    statistics[library.id] = await 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 }) => {
@@ -92,7 +96,7 @@
 
 <CommandPaletteDefaultProvider name={$t('library')} actions={[Create, ScanAll]} />
 
-<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[ScanAll, Create]}>
+<AdminPageLayout breadcrumbs={[{ title: props.data.meta.title }]} actions={[ScanAll, Create]}>
   <Container size="large" center class="my-4">
     <div class="flex flex-col items-center gap-2" in:fade={{ duration: 500 }}>
       {#if libraries.length > 0}
@@ -107,7 +111,6 @@
           </TableHeader>
           <TableBody>
             {#each libraries as library (library.id + library.name)}
-              {@const stats = statistics[library.id]}
               {@const owner = owners[library.id]}
               <TableRow>
                 <TableCell class={classes.column1}>
@@ -116,29 +119,40 @@
                 <TableCell class={classes.column2}>
                   <Link href={Route.viewUser(owner)}>{owner.name}</Link>
                 </TableCell>
-                <TableCell class={classes.column3}>
+                {#await props.data.statisticsPromise}
-                  {#if stats}
+                  <TableCell class={classes.column3}>
+                    <span class="skeleton-loader inline-block h-4 w-14"></span>
+                  </TableCell>
+                  <TableCell class={classes.column4}>
+                    <span class="skeleton-loader inline-block h-4 w-14"></span>
+                  </TableCell>
+                  <TableCell class={classes.column5}>
+                    <span class="skeleton-loader inline-block h-4 w-20"></span>
+                  </TableCell>
+                {:then loadedStats}
+                  {@const stats = statistics[library.id] || loadedStats[library.id]}
+                  <TableCell class={classes.column3}>
                     {stats.photos.toLocaleString($locale)}
-                  {:else}
+                  </TableCell>
-                    <LoadingSpinner />
+                  <TableCell class={classes.column4}>
-                  {/if}
-                </TableCell>
-                <TableCell class={classes.column4}>
-                  {#if stats}
                     {stats.videos.toLocaleString($locale)}
-                  {:else}
+                  </TableCell>
-                    <LoadingSpinner />
+                  <TableCell class={classes.column5}>
-                  {/if}
-                </TableCell>
-                <TableCell class={classes.column5}>
-                  {#if stats}
                     {@const [diskUsage, diskUsageUnit] = getBytesWithUnit(stats.usage, 0)}
                     {diskUsage}
                     {diskUsageUnit}
-                  {:else}
+                  </TableCell>
-                    <LoadingSpinner />
+                {:catch}
-                  {/if}
+                  <TableCell class={classes.column3}>
-                </TableCell>
+                    <span class="skeleton-loader inline-block h-4 w-14"></span>
+                  </TableCell>
+                  <TableCell class={classes.column4}>
+                    <span class="skeleton-loader inline-block h-4 w-14"></span>
+                  </TableCell>
+                  <TableCell class={classes.column5}>
+                    <span class="skeleton-loader inline-block h-4 w-20"></span>
+                  </TableCell>
+                {/await}
                 <TableCell class={classes.column6}>
                   <ContextMenuButton color="primary" aria-label={$t('open')} items={getActionsForLibrary(library)} />
                 </TableCell>
@@ -155,7 +169,41 @@
         />
       {/if}
 
-      {@render children?.()}
+      {@render props.children?.()}
     </div>
   </Container>
 </AdminPageLayout>
+
+<style>
+  .skeleton-loader {
+    position: relative;
+    border-radius: 4px;
+    overflow: hidden;
+    background-color: rgba(156, 163, 175, 0.35);
+  }
+
+  .skeleton-loader::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-repeat: no-repeat;
+    background-image: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 0.8) 50%,
+      rgba(255, 255, 255, 0)
+    );
+    background-size: 200% 100%;
+    background-position: 200% 0;
+    animation: skeleton-animation 2000ms infinite;
+  }
+
+  @keyframes skeleton-animation {
+    from {
+      background-position: 200% 0;
+    }
+    to {
+      background-position: -200% 0;
+    }
+  }
+</style>

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

@@ -14,19 +14,11 @@
     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';
+  import type { LibraryResponseDto } from '@immich/sdk';
   import { Code, CommandPaletteDefaultProvider, Container, Heading, modalManager } from '@immich/ui';
-  import {
+  import { mdiCameraIris, mdiChartPie, mdiFilterMinusOutline, mdiFolderOutline, mdiPlayCircle } from '@mdi/js';
-    mdiCameraIris,
-    mdiChartPie,
-    mdiFileDocumentRemoveOutline,
-    mdiFilterMinusOutline,
-    mdiFolderOutline,
-    mdiPlayCircle,
-  } from '@mdi/js';
   import type { Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { LayoutData } from './$types';
@@ -36,46 +28,32 @@
     data: LayoutData;
   };
 
-  const { children, data }: Props = $props();
+  let { children, data }: Props = $props();
+  const statisticsPromise = $derived.by(() => data.statisticsPromise);
 
-  let statistics = $state<LibraryStatsResponseDto | undefined>(undefined);
+  const photosPromise = $derived.by(() => statisticsPromise.then((stats) => ({ value: stats.photos })));
-  let storageUsage = $state<number | undefined>(undefined);
-  let unit = $state<ByteUnit | undefined>(undefined);
 
-  $effect(() => {
+  const videosPromise = $derived.by(() => statisticsPromise.then((stats) => ({ value: stats.videos })));
-    if (statistics) {
-      const [usage, u] = getBytesWithUnit(statistics.usage);
-      storageUsage = usage;
-      unit = u;
-    } else {
-      storageUsage = undefined;
-      unit = undefined;
-    }
-  });
 
-  const loadStatistics = async () => {
+  const usagePromise = $derived.by(() =>
-    try {
+    statisticsPromise.then((stats) => {
-      statistics = await data.statisticsPromise;
+      const [value, unit] = getBytesWithUnit(stats.usage);
-    } catch (error) {
+      return { value, unit };
-      console.error('Failed to load statistics:', error);
+    }),
-    }
+  );
-  };
 
-  $effect(() => {
+  let updatedLibrary = $state<LibraryResponseDto | undefined>(undefined);
-    void loadStatistics();
+  const library = $derived.by(() => (updatedLibrary?.id === data.library.id ? updatedLibrary : data.library));
-  });
-
-  let library = $state(data.library);
 
   const onLibraryUpdate = (newLibrary: LibraryResponseDto) => {
     if (newLibrary.id === library.id) {
-      library = newLibrary;
+      updatedLibrary = newLibrary;
     }
   };
 
-  const onLibraryDelete = async ({ id }: { id: string }) => {
+  const onLibraryDelete = ({ id }: { id: string }) => {
     if (id === library.id) {
-      await goto(Route.libraries());
+      void goto(Route.libraries());
     }
   };
 
@@ -94,9 +72,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={mdiCameraIris} title={$t('photos')} valuePromise={photosPromise} />
-        <ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} value={statistics?.videos} />
+        <ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} valuePromise={videosPromise} />
-        <ServerStatisticsCard icon={mdiChartPie} title={$t('usage')} value={storageUsage} {unit} />
+        <ServerStatisticsCard icon={mdiChartPie} title={$t('usage')} valuePromise={usagePromise} />
       </div>
 
       <AdminCard icon={mdiFolderOutline} title={$t('folders')} headerAction={AddFolder}>
@@ -145,10 +123,6 @@
           </tbody>
         </table>
       </AdminCard>
-
-      <div class="flex flex-col lg:flex-row gap-4">
-        <ServerStatisticsCard icon={mdiFileDocumentRemoveOutline} title={$t('offline')} value={statistics?.offline} />
-      </div>
     </div>
     {@render children?.()}
   </Container>

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 () => {
+  const statsPromise = $derived.by(() => {
-    try {
+    if (stats) {
-      stats = await data.statsPromise;
+      return Promise.resolve(stats);
-    } catch (error) {
-      console.error('Failed to load server statistics:', error);
     }
-  };
+    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 {statsPromise} users={data.users} />
-      <ServerStatisticsPanel {stats} />
-    {:else}
-      <LoadingSpinner />
-    {/if}
   </Container>
 </AdminPageLayout>

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

@@ -1,15 +1,17 @@
 import { authenticate } from '$lib/utils/auth';
 import { getFormatter } from '$lib/utils/i18n';
-import { getServerStatistics } from '@immich/sdk';
+import { getServerStatistics, searchUsersAdmin } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
   await authenticate(url, { admin: true });
   const statsPromise = getServerStatistics();
+  const users = await searchUsersAdmin({ withDeleted: false });
   const $t = await getFormatter();
 
   return {
     statsPromise,
+    users,
     meta: {
       title: $t('server_stats'),
     },

web/src/routes/admin/users/[id]/+layout.svelte

@@ -123,9 +123,21 @@
         </div>
         <div class="col-span-full">
           <div class="flex flex-col lg:flex-row gap-4 w-full">
-            <ServerStatisticsCard icon={mdiCameraIris} title={$t('photos')} value={userStatistics.images} />
+            <ServerStatisticsCard
-            <ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} value={userStatistics.videos} />
+              icon={mdiCameraIris}
-            <ServerStatisticsCard icon={mdiChartPie} title={$t('storage')} value={statsUsage} unit={statsUsageUnit} />
+              title={$t('photos')}
+              valuePromise={Promise.resolve({ value: userStatistics.images })}
+            />
+            <ServerStatisticsCard
+              icon={mdiPlayCircle}
+              title={$t('videos')}
+              valuePromise={Promise.resolve({ value: userStatistics.videos })}
+            />
+            <ServerStatisticsCard
+              icon={mdiChartPie}
+              title={$t('storage')}
+              valuePromise={Promise.resolve({ value: statsUsage, unit: statsUsageUnit })}
+            />
           </div>
         </div>