fix(web): i18n race condition in load function (#10693)

web/src/lib/utils/i18n.ts

@@ -0,0 +1,13 @@
+import { locale, t, waitLocale } from 'svelte-i18n';
+import { get, type Unsubscriber } from 'svelte/store';
+
+export async function getFormatter() {
+  let unsubscribe: Unsubscriber | undefined;
+  await new Promise((resolve) => {
+    unsubscribe = locale.subscribe((value) => value && resolve(value));
+  });
+  unsubscribe?.();
+
+  await waitLocale();
+  return get(t);
+}

web/src/routes/(user)/albums/+page.ts

@@ -1,14 +1,13 @@
 import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { getAllAlbums } from '@immich/sdk';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate();
   const sharedAlbums = await getAllAlbums({ shared: true });
   const albums = await getAllAlbums({});
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     albums,

web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.ts

@@ -1,13 +1,12 @@
 import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   await authenticate();
   const asset = await getAssetInfoFromParam(params);
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     asset,

web/src/routes/(user)/explore/+page.ts

@@ -1,13 +1,12 @@
 import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { getAllPeople, getExploreData } from '@immich/sdk';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate();
   const [items, response] = await Promise.all([getExploreData(), getAllPeople({ withHidden: false })]);
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     items,

web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.ts

@@ -1,13 +1,12 @@
 import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   await authenticate();
   const asset = await getAssetInfoFromParam(params);
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     asset,

web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.ts

@@ -1,13 +1,12 @@
 import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   await authenticate();
   const asset = await getAssetInfoFromParam(params);
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     asset,

web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/+page.ts

@@ -1,13 +1,12 @@
 import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   const user = await authenticate();
   const asset = await getAssetInfoFromParam(params);
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     user,

web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.ts

@@ -1,8 +1,7 @@
 import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
 import { getUser } from '@immich/sdk';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
@@ -10,7 +9,7 @@ export const load = (async ({ params }) => {
 
   const partner = await getUser({ id: params.userId });
   const asset = await getAssetInfoFromParam(params);
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     asset,

web/src/routes/(user)/people/+page.ts

@@ -1,14 +1,13 @@
 import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { getAllPeople } from '@immich/sdk';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate();
 
   const people = await getAllPeople({ withHidden: true });
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     people,

web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.ts

@@ -1,8 +1,7 @@
 import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
 import { getPerson, getPersonStatistics } from '@immich/sdk';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
@@ -13,7 +12,7 @@ export const load = (async ({ params }) => {
     getPersonStatistics({ id: params.personId }),
     getAssetInfoFromParam(params),
   ]);
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     person,

web/src/routes/(user)/photos/[[assetId=id]]/+page.ts

@@ -1,13 +1,12 @@
 import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   await authenticate();
   const asset = await getAssetInfoFromParam(params);
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     asset,

web/src/routes/(user)/places/+page.ts

@@ -1,13 +1,12 @@
 import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { getAssetsByCity } from '@immich/sdk';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate();
   const items = await getAssetsByCity();
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     items,

web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.ts

@@ -1,13 +1,12 @@
 import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   await authenticate();
   const asset = await getAssetInfoFromParam(params);
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     asset,

web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.ts

@@ -1,22 +1,21 @@
 import { getAssetThumbnailUrl, setSharedLink } from '$lib/utils';
 import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
 import { getMySharedLink, isHttpError } from '@immich/sdk';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   const { key } = params;
   await authenticate({ public: true });
   const asset = await getAssetInfoFromParam(params);
-  const $t = get(t);
 
   try {
     const sharedLink = await getMySharedLink({ key });
     setSharedLink(sharedLink);
     const assetCount = sharedLink.assets.length;
     const assetId = sharedLink.album?.albumThumbnailAssetId || sharedLink.assets[0]?.id;
+    const $t = await getFormatter();
 
     return {
       sharedLink,
@@ -30,6 +29,7 @@ export const load = (async ({ params }) => {
     };
   } catch (error) {
     if (isHttpError(error) && error.data.message === 'Invalid password') {
+      const $t = await getFormatter();
       return {
         passwordRequired: true,
         sharedLinkKey: key,

web/src/routes/(user)/sharing/+page.ts

@@ -1,14 +1,13 @@
 import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { getAllAlbums, getPartners } from '@immich/sdk';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate();
   const sharedAlbums = await getAllAlbums({ shared: true });
   const partners = await getPartners({ direction: 'shared-with' });
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     sharedAlbums,

web/src/routes/(user)/sharing/sharedlinks/+page.ts

@@ -1,11 +1,10 @@
 import { authenticate } from '$lib/utils/auth';
-import { t } from 'svelte-i18n';
+import { getFormatter } from '$lib/utils/i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate();
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     meta: {

web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.ts

@@ -1,13 +1,12 @@
 import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   await authenticate();
   const asset = await getAssetInfoFromParam(params);
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     asset,

web/src/routes/(user)/user-settings/+page.ts

@@ -1,7 +1,6 @@
 import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { getApiKeys, getSessions } from '@immich/sdk';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
@@ -9,7 +8,7 @@ export const load = (async () => {
 
   const keys = await getApiKeys();
   const sessions = await getSessions();
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     keys,

web/src/routes/(user)/utilities/+page.ts

@@ -1,13 +1,12 @@
 import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   await authenticate();
   const asset = await getAssetInfoFromParam(params);
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     asset,

web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.ts

@@ -1,15 +1,14 @@
 import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
 import { getAssetDuplicates } from '@immich/sdk';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   await authenticate();
   const asset = await getAssetInfoFromParam(params);
   const duplicates = await getAssetDuplicates();
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     asset,

web/src/routes/+page.ts

@@ -1,8 +1,7 @@
 import { AppRoute } from '$lib/constants';
+import { getFormatter } from '$lib/utils/i18n';
 import { getServerConfig } from '@immich/sdk';
 import { redirect } from '@sveltejs/kit';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import { loadUser } from '../lib/utils/auth';
 import type { PageLoad } from './$types';
 
@@ -21,7 +20,7 @@ export const load = (async () => {
     redirect(302, AppRoute.AUTH_LOGIN);
   }
 
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     meta: {

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

@@ -1,14 +1,13 @@
 import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { getAllJobsStatus } from '@immich/sdk';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate({ admin: true });
 
   const jobs = await getAllJobsStatus();
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     jobs,

web/src/routes/admin/library-management/+page.ts

@@ -1,14 +1,13 @@
 import { authenticate, requestServerInfo } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { searchUsersAdmin } from '@immich/sdk';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate({ admin: true });
   await requestServerInfo();
   const allUsers = await searchUsersAdmin({ withDeleted: false });
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     allUsers,

web/src/routes/admin/repair/+page.ts

@@ -1,13 +1,12 @@
 import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { getAuditFiles } from '@immich/sdk';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate({ admin: true });
   const { orphans, extras } = await getAuditFiles();
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     orphans,

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

@@ -1,13 +1,12 @@
 import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { getServerStatistics } from '@immich/sdk';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate({ admin: true });
   const stats = await getServerStatistics();
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     stats,

web/src/routes/admin/system-settings/+page.ts

@@ -1,13 +1,12 @@
 import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { getConfig } from '@immich/sdk';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate({ admin: true });
   const configs = await getConfig();
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     configs,

web/src/routes/admin/user-management/+page.ts

@@ -1,14 +1,13 @@
 import { authenticate, requestServerInfo } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { searchUsersAdmin } from '@immich/sdk';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate({ admin: true });
   await requestServerInfo();
   const allUsers = await searchUsersAdmin({ withDeleted: true });
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     allUsers,

web/src/routes/auth/change-password/+page.ts

@@ -1,8 +1,8 @@
 import { AppRoute } from '$lib/constants';
 import { user } from '$lib/stores/user.store';
 import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
 import { redirect } from '@sveltejs/kit';
-import { t } from 'svelte-i18n';
 import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
@@ -12,7 +12,7 @@ export const load = (async () => {
     redirect(302, AppRoute.PHOTOS);
   }
 
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     meta: {

web/src/routes/auth/login/+page.ts

@@ -1,8 +1,7 @@
 import { AppRoute } from '$lib/constants';
+import { getFormatter } from '$lib/utils/i18n';
 import { defaults, getServerConfig } from '@immich/sdk';
 import { redirect } from '@sveltejs/kit';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ fetch }) => {
@@ -13,7 +12,7 @@ export const load = (async ({ fetch }) => {
     redirect(302, AppRoute.AUTH_REGISTER);
   }
 
-  const $t = get(t);
+  const $t = await getFormatter();
   return {
     meta: {
       title: $t('login'),

web/src/routes/auth/onboarding/+page.ts

@@ -1,14 +1,13 @@
 import { loadConfig } from '$lib/stores/server-config.store';
 import { authenticate } from '$lib/utils/auth';
-import { t } from 'svelte-i18n';
+import { getFormatter } from '$lib/utils/i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate({ admin: true });
   await loadConfig();
 
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     meta: {

web/src/routes/auth/register/+page.ts

@@ -1,8 +1,7 @@
 import { AppRoute } from '$lib/constants';
+import { getFormatter } from '$lib/utils/i18n';
 import { getServerConfig } from '@immich/sdk';
 import { redirect } from '@sveltejs/kit';
-import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
@@ -12,7 +11,7 @@ export const load = (async () => {
     redirect(302, AppRoute.AUTH_LOGIN);
   }
 
-  const $t = get(t);
+  const $t = await getFormatter();
 
   return {
     meta: {