fix: reduce the number of API requests when changing route (#14666)

* fix: reduce the number of API requests when changing route

* fix: reset `userInteraction` after sign out
This commit is contained in:
martin 2024-12-16 15:45:01 +01:00 committed by GitHub
parent 6b0f9ec46c
commit 8945a5d862
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 63 additions and 20 deletions

View file

@ -4,13 +4,19 @@
import { getAllAlbums, type AlbumResponseDto } from '@immich/sdk';
import { handleError } from '$lib/utils/handle-error';
import { t } from 'svelte-i18n';
import { userInteraction } from '$lib/stores/user.svelte';
let albums: AlbumResponseDto[] = $state([]);
onMount(async () => {
if (userInteraction.recentAlbums) {
albums = userInteraction.recentAlbums;
return;
}
try {
const allAlbums = await getAllAlbums({});
albums = allAlbums.sort((a, b) => (a.updatedAt > b.updatedAt ? -1 : 1)).slice(0, 3);
userInteraction.recentAlbums = albums;
} catch (error) {
handleError(error, $t('failed_to_load_assets'));
}

View file

@ -12,17 +12,24 @@
} from '@immich/sdk';
import Icon from '$lib/components/elements/icon.svelte';
import { mdiAlert } from '@mdi/js';
import { userInteraction } from '$lib/stores/user.svelte';
const { serverVersion, connected } = websocketStore;
let isOpen = $state(false);
let info: ServerAboutResponseDto | undefined = $state();
let versions: ServerVersionHistoryResponseDto[] = $state([]);
onMount(async () => {
if (userInteraction.aboutInfo && userInteraction.versions && $serverVersion) {
info = userInteraction.aboutInfo;
versions = userInteraction.versions;
return;
}
await requestServerInfo();
[info, versions] = await Promise.all([getAboutInfo(), getVersionHistory()]);
userInteraction.aboutInfo = info;
userInteraction.versions = versions;
});
let isMain = $derived(info?.sourceRef === 'main' && info.repository === 'immich-app/immich');
let version = $derived(

View file

@ -1,18 +1,18 @@
<script lang="ts">
import { locale } from '$lib/stores/preferences.store';
import { serverInfo } from '$lib/stores/server-info.store';
import { user } from '$lib/stores/user.store';
import { requestServerInfo } from '$lib/utils/auth';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import { getByteUnitString } from '../../../utils/byte-units';
import { getByteUnitString } from '$lib/utils/byte-units';
import LoadingSpinner from '../loading-spinner.svelte';
import { userInteraction } from '$lib/stores/user.svelte';
let usageClasses = $state('');
let hasQuota = $derived($user?.quotaSizeInBytes !== null);
let availableBytes = $derived((hasQuota ? $user?.quotaSizeInBytes : $serverInfo?.diskSizeRaw) || 0);
let usedBytes = $derived((hasQuota ? $user?.quotaUsageInBytes : $serverInfo?.diskUseRaw) || 0);
let availableBytes = $derived((hasQuota ? $user?.quotaSizeInBytes : userInteraction.serverInfo?.diskSizeRaw) || 0);
let usedBytes = $derived((hasQuota ? $user?.quotaUsageInBytes : userInteraction.serverInfo?.diskUseRaw) || 0);
let usedPercentage = $derived(Math.min(Math.round((usedBytes / availableBytes) * 100), 100));
const onUpdate = () => {
@ -38,6 +38,9 @@
});
onMount(async () => {
if (userInteraction.serverInfo && $user) {
return;
}
await requestServerInfo();
});
</script>
@ -54,7 +57,7 @@
<div class="hidden group-hover:sm:block md:block">
<p class="font-medium text-immich-dark-gray dark:text-white mb-2">{$t('storage')}</p>
{#if $serverInfo}
{#if userInteraction.serverInfo}
<p class="text-gray-500 dark:text-gray-300">
{$t('storage_usage', {
values: {