feat: loading screen, initSDK on bootstrap, fix FOUC for theme (#10350)

* feat: loading screen, initSDK on bootstrap, fix FOUC for theme

* pulsate immich logo, don't set localstorage

* Make it spin

* Rework error handling a bit

* Cleanup

* fix test

* rename, memoize

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/lib/components/admin-page/settings/admin-settings.svelte

@@ -7,7 +7,7 @@
   } from '$lib/components/shared-components/notification/notification';
   import { handleError } from '$lib/utils/handle-error';
   import { getConfig, getConfigDefaults, updateConfig, type SystemConfigDto } from '@immich/sdk';
-  import { loadConfig } from '$lib/stores/server-config.store';
+  import { retrieveServerConfig } from '$lib/stores/server-config.store';
   import { cloneDeep, isEqual } from 'lodash-es';
   import { onMount } from 'svelte';
   import type { SettingsResetOptions } from './admin-settings';
@@ -39,7 +39,7 @@
       savedConfig = cloneDeep(newConfig);
       notificationController.show({ message: $t('settings_saved'), type: NotificationType.Info });
 
-      await loadConfig();
+      await retrieveServerConfig();
     } catch (error) {
       handleError(error, $t('errors.unable_to_save_settings'));
     }

web/src/lib/components/error.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
+  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { copyToClipboard } from '$lib/utils';
+  import { mdiCodeTags, mdiContentCopy, mdiMessage, mdiPartyPopper } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  export let error: { message: string; code?: string | number; stack?: string } | undefined | null = undefined;
+
+  const handleCopy = async () => {
+    if (!error) {
+      return;
+    }
+
+    await copyToClipboard(`${error.message} - ${error.code}\n${error.stack}`);
+  };
+</script>
+
+<div class="h-screen w-screen">
+  <section class="bg-immich-bg dark:bg-immich-dark-bg">
+    <div class="flex place-items-center border-b px-6 py-4 dark:border-b-immich-dark-gray">
+      <a class="flex place-items-center gap-2 hover:cursor-pointer" href="/photos">
+        <ImmichLogo width="55%" />
+      </a>
+    </div>
+  </section>
+
+  <div class="fixed top-0 flex h-full w-full place-content-center place-items-center overflow-hidden bg-black/50">
+    <div>
+      <div
+        class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
+      >
+        <div>
+          <div class="flex items-center justify-between gap-4 px-4 py-4">
+            <h1 class="font-medium text-immich-primary dark:text-immich-dark-primary">
+              🚨 {$t('error_title')}
+            </h1>
+            <div class="flex justify-end">
+              <CircleIconButton
+                color="primary"
+                icon={mdiContentCopy}
+                title={$t('copy_error')}
+                on:click={() => handleCopy()}
+              />
+            </div>
+          </div>
+
+          <hr />
+
+          <div class="immich-scrollbar max-h-[75vh] min-h-[300px] gap-4 overflow-y-auto p-4 pb-4">
+            <div class="flex w-full flex-col gap-2">
+              <p class="text-red-500">{error?.message} ({error?.code})</p>
+              {#if error?.stack}
+                <label for="stacktrace">{$t('stacktrace')}</label>
+                <pre id="stacktrace" class="text-xs">{error?.stack || 'No stack'}</pre>
+              {/if}
+            </div>
+          </div>
+
+          <hr />
+
+          <div class="flex place-content-center place-items-center justify-around">
+            <!-- href="https://github.com/immich-app/immich/issues/new" -->
+            <a
+              href="https://discord.immich.app"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex grow basis-0 justify-center p-4"
+            >
+              <div class="flex flex-col place-content-center place-items-center gap-2">
+                <Icon path={mdiMessage} size={24} />
+                <p class="text-sm">{$t('get_help')}</p>
+              </div>
+            </a>
+
+            <a
+              href="https://github.com/immich-app/immich/releases"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex grow basis-0 justify-center p-4"
+            >
+              <div class="flex flex-col place-content-center place-items-center gap-2">
+                <Icon path={mdiPartyPopper} size={24} />
+                <p class="text-sm">{$t('read_changelog')}</p>
+              </div>
+            </a>
+
+            <a
+              href="https://immich.app/docs/guides/docker-help"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex grow basis-0 justify-center p-4"
+            >
+              <div class="flex flex-col place-content-center place-items-center gap-2">
+                <Icon path={mdiCodeTags} size={24} />
+                <p class="text-sm">{$t('check_logs')}</p>
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

web/src/lib/components/forms/admin-registration-form.svelte

@@ -6,6 +6,7 @@
   import Button from '../elements/buttons/button.svelte';
   import PasswordField from '../shared-components/password-field.svelte';
   import { t } from 'svelte-i18n';
+  import { retrieveServerConfig } from '$lib/stores/server-config.store';
 
   let email = '';
   let password = '';
@@ -31,6 +32,7 @@
 
       try {
         await signUpAdmin({ signUpDto: { email, password, name } });
+        await retrieveServerConfig();
         await goto(AppRoute.AUTH_LOGIN);
       } catch (error) {
         handleError(error, $t('errors.unable_to_create_admin_account'));

web/src/lib/components/forms/login-form.svelte

@@ -5,7 +5,7 @@
   import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
   import { oauth } from '$lib/utils';
   import { getServerErrorMessage, handleError } from '$lib/utils/handle-error';
-  import { getServerConfig, login } from '@immich/sdk';
+  import { login } from '@immich/sdk';
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
   import Button from '../elements/buttons/button.svelte';
@@ -58,11 +58,9 @@
     try {
       errorMessage = '';
       loading = true;
-
       const user = await login({ loginCredentialDto: { email, password } });
-      const serverConfig = await getServerConfig();
 
-      if (user.isAdmin && !serverConfig.isOnboarded) {
+      if (user.isAdmin && !$serverConfig.isOnboarded) {
         await onOnboarding();
         return;
       }