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>
This commit is contained in:
Min Idzelis
@@ -1,106 +1,6 @@
|
||||
<script>
|
||||
import { page } from '$app/stores';
|
||||
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';
|
||||
|
||||
const handleCopy = async () => {
|
||||
//
|
||||
const error = $page.error || null;
|
||||
if (!error) {
|
||||
return;
|
||||
}
|
||||
|
||||
await copyToClipboard(`${error.message} - ${error.code}\n${error.stack}`);
|
||||
};
|
||||
import Error from '$lib/components/error.svelte';
|
||||
</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">{$page.error?.message} ({$page.error?.code})</p>
|
||||
{#if $page.error?.stack}
|
||||
<label for="stacktrace">{$t('stacktrace')}</label>
|
||||
<pre id="stacktrace" class="text-xs">{$page.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>
|
||||
<Error error={$page.error}></Error>
|
||||
|
||||
@@ -10,16 +10,18 @@
|
||||
import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte';
|
||||
import { Theme } from '$lib/constants';
|
||||
import { colorTheme, handleToggleTheme, type ThemeSetting } from '$lib/stores/preferences.store';
|
||||
import { loadConfig, serverConfig } from '$lib/stores/server-config.store';
|
||||
|
||||
import { serverConfig } from '$lib/stores/server-config.store';
|
||||
|
||||
import { user } from '$lib/stores/user.store';
|
||||
import { closeWebsocketConnection, openWebsocketConnection } from '$lib/stores/websocket';
|
||||
import { copyToClipboard, setKey } from '$lib/utils';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import '../app.css';
|
||||
import { isAssetViewerRoute, isSharedLinkRoute } from '$lib/utils/navigation';
|
||||
import DialogWrapper from '$lib/components/shared-components/dialog/dialog-wrapper.svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
import Error from '$lib/components/error.svelte';
|
||||
import { shortcut } from '$lib/actions/shortcut';
|
||||
|
||||
let showNavigationLoadingBar = false;
|
||||
@@ -33,8 +35,7 @@
|
||||
|
||||
const changeTheme = (theme: ThemeSetting) => {
|
||||
if (theme.system) {
|
||||
theme.value =
|
||||
window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? Theme.DARK : Theme.LIGHT;
|
||||
theme.value = window.matchMedia('(prefers-color-scheme: dark)').matches ? Theme.DARK : Theme.LIGHT;
|
||||
}
|
||||
|
||||
if (theme.value === Theme.LIGHT) {
|
||||
@@ -55,6 +56,8 @@
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
const element = document.querySelector('#stencil');
|
||||
element?.remove();
|
||||
// if the browser theme changes, changes the Immich theme too
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', handleChangeTheme);
|
||||
});
|
||||
@@ -77,14 +80,6 @@
|
||||
afterNavigate(() => {
|
||||
showNavigationLoadingBar = false;
|
||||
});
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
await loadConfig();
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_connect_to_server'));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -134,7 +129,12 @@
|
||||
onShortcut: () => copyToClipboard(getMyImmichLink().toString()),
|
||||
}}
|
||||
/>
|
||||
<slot />
|
||||
|
||||
{#if $page.data.error}
|
||||
<Error error={$page.data.error}></Error>
|
||||
{:else}
|
||||
<slot />
|
||||
{/if}
|
||||
|
||||
{#if showNavigationLoadingBar}
|
||||
<NavigationLoadingBar />
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
import { initApp } from '$lib/utils';
|
||||
import { defaults } from '@immich/sdk';
|
||||
import { init } from '$lib/utils/server';
|
||||
import type { LayoutLoad } from './$types';
|
||||
|
||||
export const ssr = false;
|
||||
export const csr = true;
|
||||
|
||||
export const load = (async ({ fetch }) => {
|
||||
// set event.fetch on the fetch-client used by @immich/sdk
|
||||
// https://kit.svelte.dev/docs/load#making-fetch-requests
|
||||
// https://github.com/oazapfts/oazapfts/blob/main/README.md#fetch-options
|
||||
defaults.fetch = fetch;
|
||||
|
||||
await initApp();
|
||||
let error;
|
||||
try {
|
||||
await init(fetch);
|
||||
} catch (initError) {
|
||||
error = initError;
|
||||
}
|
||||
|
||||
return {
|
||||
error,
|
||||
meta: {
|
||||
title: 'Immich',
|
||||
},
|
||||
|
||||
+24
-12
@@ -1,26 +1,38 @@
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { serverConfig } from '$lib/stores/server-config.store';
|
||||
import { getFormatter } from '$lib/utils/i18n';
|
||||
import { getServerConfig } from '@immich/sdk';
|
||||
import { init } from '$lib/utils/server';
|
||||
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import { get } from 'svelte/store';
|
||||
import { loadUser } from '../lib/utils/auth';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const ssr = false;
|
||||
export const csr = true;
|
||||
|
||||
export const load = (async () => {
|
||||
const authenticated = await loadUser();
|
||||
if (authenticated) {
|
||||
redirect(302, AppRoute.PHOTOS);
|
||||
}
|
||||
export const load = (async ({ fetch }) => {
|
||||
let $t = (arg: string) => arg;
|
||||
try {
|
||||
await init(fetch);
|
||||
const authenticated = await loadUser();
|
||||
if (authenticated) {
|
||||
redirect(302, AppRoute.PHOTOS);
|
||||
}
|
||||
|
||||
const { isInitialized } = await getServerConfig();
|
||||
if (isInitialized) {
|
||||
// Redirect to login page if there exists an admin account (i.e. server is initialized)
|
||||
redirect(302, AppRoute.AUTH_LOGIN);
|
||||
}
|
||||
const { isInitialized } = get(serverConfig);
|
||||
if (isInitialized) {
|
||||
// Redirect to login page if there exists an admin account (i.e. server is initialized)
|
||||
redirect(302, AppRoute.AUTH_LOGIN);
|
||||
}
|
||||
|
||||
const $t = await getFormatter();
|
||||
$t = await getFormatter();
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
} catch (redirectError: any) {
|
||||
if (redirectError?.status === 302) {
|
||||
throw redirectError;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
meta: {
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { serverConfig } from '$lib/stores/server-config.store';
|
||||
import { getFormatter } from '$lib/utils/i18n';
|
||||
import { defaults, getServerConfig } from '@immich/sdk';
|
||||
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import { get } from 'svelte/store';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async ({ fetch }) => {
|
||||
defaults.fetch = fetch;
|
||||
const { isInitialized } = await getServerConfig();
|
||||
export const load = (async ({ parent }) => {
|
||||
await parent();
|
||||
const { isInitialized } = get(serverConfig);
|
||||
|
||||
if (!isInitialized) {
|
||||
// Admin not registered
|
||||
redirect(302, AppRoute.AUTH_REGISTER);
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
import { loadConfig } from '$lib/stores/server-config.store';
|
||||
import { authenticate } from '$lib/utils/auth';
|
||||
import { getFormatter } from '$lib/utils/i18n';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async () => {
|
||||
await authenticate({ admin: true });
|
||||
await loadConfig();
|
||||
|
||||
const $t = await getFormatter();
|
||||
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { serverConfig } from '$lib/stores/server-config.store';
|
||||
import { getFormatter } from '$lib/utils/i18n';
|
||||
import { getServerConfig } from '@immich/sdk';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import { get } from 'svelte/store';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async () => {
|
||||
const { isInitialized } = await getServerConfig();
|
||||
export const load = (async ({ parent }) => {
|
||||
await parent();
|
||||
const { isInitialized } = get(serverConfig);
|
||||
if (isInitialized) {
|
||||
// Admin has been registered, redirect to login
|
||||
redirect(302, AppRoute.AUTH_LOGIN);
|
||||
|
||||
Reference in New Issue
Block a user