fix: reduce the number of API requests when changing route

immich-app · Dec 12, 2024 · c042f71 · c042f71
1 parent c52f1ba
commit c042f71
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 26 deletions.
diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@@ -6,9 +6,9 @@
   import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
-  import { user } from '$lib/stores/user.store';
+  import { aboutInfo, user } from '$lib/stores/user.store';
   import { handleLogout } from '$lib/utils/auth';
-  import { getAboutInfo, logout, type ServerAboutResponseDto } from '@immich/sdk';
+  import { getAboutInfo, logout } from '@immich/sdk';
   import { mdiHelpCircleOutline, mdiMagnify, mdiTrayArrowUp } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
@@ -38,17 +38,18 @@
     await handleLogout(redirectUri);
   };
 
-  let aboutInfo: ServerAboutResponseDto | undefined = $state();
-
   onMount(async () => {
-    aboutInfo = await getAboutInfo();
+    if ($aboutInfo) {
+      return;
+    }
+    $aboutInfo = await getAboutInfo();
   });
 </script>
 
 <svelte:window bind:innerWidth />
 
 {#if shouldShowHelpPanel && aboutInfo}
-  <HelpAndFeedbackModal onClose={() => (shouldShowHelpPanel = false)} info={aboutInfo} />
+  <HelpAndFeedbackModal onClose={() => (shouldShowHelpPanel = false)} info={$aboutInfo} />
 {/if}
 
 <section id="dashboard-navbar" class="fixed z-[900] h-[var(--navbar-height)] w-screen text-sm">

diff --git a/web/src/lib/components/shared-components/side-bar/recent-albums.svelte b/web/src/lib/components/shared-components/side-bar/recent-albums.svelte
@@ -1,23 +1,25 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { getAssetThumbnailUrl } from '$lib/utils';
-  import { getAllAlbums, type AlbumResponseDto } from '@immich/sdk';
+  import { getAllAlbums } from '@immich/sdk';
   import { handleError } from '$lib/utils/handle-error';
   import { t } from 'svelte-i18n';
-
-  let albums: AlbumResponseDto[] = $state([]);
+  import { recentAlbums } from '$lib/stores/user.store';
 
   onMount(async () => {
+    if ($recentAlbums) {
+      return;
+    }
     try {
       const allAlbums = await getAllAlbums({});
-      albums = allAlbums.sort((a, b) => (a.updatedAt > b.updatedAt ? -1 : 1)).slice(0, 3);
+      $recentAlbums = allAlbums.sort((a, b) => (a.updatedAt > b.updatedAt ? -1 : 1)).slice(0, 3);
     } catch (error) {
       handleError(error, $t('failed_to_load_assets'));
     }
   });
 </script>
 
-{#each albums as album}
+{#each $recentAlbums as album}
   <a
     href={'/albums/' + album.id}
     title={album.albumName}

diff --git a/web/src/lib/components/shared-components/side-bar/server-status.svelte b/web/src/lib/components/shared-components/side-bar/server-status.svelte
@@ -4,34 +4,30 @@
   import { requestServerInfo } from '$lib/utils/auth';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
-  import {
-    getAboutInfo,
-    getVersionHistory,
-    type ServerAboutResponseDto,
-    type ServerVersionHistoryResponseDto,
-  } from '@immich/sdk';
+  import { getAboutInfo, getVersionHistory } from '@immich/sdk';
   import Icon from '$lib/components/elements/icon.svelte';
   import { mdiAlert } from '@mdi/js';
+  import { aboutInfo, versions } from '$lib/stores/user.store';
 
   const { serverVersion, connected } = websocketStore;
 
   let isOpen = $state(false);
 
-  let info: ServerAboutResponseDto | undefined = $state();
-  let versions: ServerVersionHistoryResponseDto[] = $state([]);
-
   onMount(async () => {
+    if ($aboutInfo && $versions && $serverVersion) {
+      return;
+    }
     await requestServerInfo();
-    [info, versions] = await Promise.all([getAboutInfo(), getVersionHistory()]);
+    [$aboutInfo, $versions] = await Promise.all([getAboutInfo(), getVersionHistory()]);
   });
-  let isMain = $derived(info?.sourceRef === 'main' && info.repository === 'immich-app/immich');
+  let isMain = $derived($aboutInfo?.sourceRef === 'main' && $aboutInfo.repository === 'immich-app/immich');
   let version = $derived(
     $serverVersion ? `v${$serverVersion.major}.${$serverVersion.minor}.${$serverVersion.patch}` : null,
   );
 </script>
 
-{#if isOpen && info}
-  <ServerAboutModal onClose={() => (isOpen = false)} {info} {versions} />
+{#if isOpen && $aboutInfo}
+  <ServerAboutModal onClose={() => (isOpen = false)} info={$aboutInfo} versions={$versions} />
 {/if}
 
 <div
@@ -53,7 +49,7 @@
     {#if $connected && version}
       <button type="button" onclick={() => (isOpen = true)} class="dark:text-immich-gray flex gap-1">
         {#if isMain}
-          <Icon path={mdiAlert} size="1.5em" color="#ffcc4d" /> {info?.sourceRef}
+          <Icon path={mdiAlert} size="1.5em" color="#ffcc4d" /> {$aboutInfo?.sourceRef}
         {:else}
           {version}
         {/if}

diff --git a/web/src/lib/components/shared-components/side-bar/storage-space.svelte b/web/src/lib/components/shared-components/side-bar/storage-space.svelte
@@ -38,6 +38,9 @@
   });
 
   onMount(async () => {
+    if ($serverInfo && $user) {
+      return;
+    }
     await requestServerInfo();
   });
 </script>

diff --git a/web/src/lib/stores/user.store.ts b/web/src/lib/stores/user.store.ts
@@ -1,5 +1,11 @@
 import { purchaseStore } from '$lib/stores/purchase.store';
-import { type UserAdminResponseDto, type UserPreferencesResponseDto } from '@immich/sdk';
+import {
+  type AlbumResponseDto,
+  type ServerAboutResponseDto,
+  type ServerVersionHistoryResponseDto,
+  type UserAdminResponseDto,
+  type UserPreferencesResponseDto,
+} from '@immich/sdk';
 import { writable } from 'svelte/store';
 
 export const user = writable<UserAdminResponseDto>();
@@ -14,3 +20,9 @@ export const resetSavedUser = () => {
   preferences.set(undefined as unknown as UserPreferencesResponseDto);
   purchaseStore.setPurchaseStatus(false);
 };
+
+export const recentAlbums = writable<AlbumResponseDto[]>();
+
+export const versions = writable<ServerVersionHistoryResponseDto[]>();
+
+export const aboutInfo = writable<ServerAboutResponseDto>();