From fd98e6c36a42c1bba7b764f93ffc3ee572ead090 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sat, 27 Apr 2024 22:07:04 -0700
Subject: fix(layout): wait for en locale

---
 src/routes/+layout.svelte | 191 +++++++++++++++++++++++++---------------------
 1 file changed, 102 insertions(+), 89 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2bda9e50..5a327169 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -14,7 +14,7 @@
 	import Notification from '$lib/Notification/Notification.svelte';
 	import Root from '$lib/Home/Root.svelte';
 	import root from '$lib/Utility/root';
-	import { addMessages, init, locale as i18nLocale } from 'svelte-i18n';
+	import { addMessages, init, locale as i18nLocale, locales } from 'svelte-i18n';
 	import english from '$lib/Locale/english';
 	import japanese from '$lib/Locale/japanese';
 	import type { LocaleDictionary } from '$lib/Locale/layout';
@@ -27,6 +27,7 @@
 	import settingsSyncPulled from '$stores/settingsSyncPulled';
 	import settingsSyncTimes from '$stores/settingsSyncTimes';
 	import Announcement from '$lib/Announcement.svelte';
+	import Message from '$lib/Loading/Message.svelte';
 
 	injectSpeedInsights();
 
@@ -136,102 +137,114 @@
 
 <HeadTitle />
 
-<Announcement />
-
-<div class="container">
-	<div class="card card-centered header" class:header-hidden={!isHeaderVisible}>
-		<div>
-			<a href={root('/')} class="header-item">{$locale().navigation.home}</a><a
-				href={root('/completed')}
-				class="header-item"
-			>
-				{$locale().navigation.completed}
-			</a>
-			<Dropdown
-				items={[
-					{ name: $locale().navigation.subtitleSchedule, url: root('/schedule') },
-					{ name: $locale().navigation.hololive, url: root('/hololive') },
-					{ name: $locale().tools.tool.characterBirthdays.short, url: root('/birthdays') },
-					{ name: $locale().navigation.newReleases, url: root('/updates') }
-				]}
-				header={false}
-			>
-				<span slot="title" class="header-item">{$locale().navigation.schedule}</span>
-			</Dropdown>
-			<a href={root('/tools')} class="header-item">{$locale().navigation.tools}</a>
-			<a href={root('/settings')} class="header-item">{$locale().navigation.settings}</a>
-
-			<span class="header-item opaque separator">•</span>
-
-			{#if data.user}
+{#if !$locales.includes('en')}
+	<Message />
+
+	{#if data.url === '/settings'}
+		<Skeleton grid={true} count={1} height="10vh" />
+		<Skeleton grid={true} count={1} height="30vh" />
+		<Skeleton grid={true} count={1} height="30vh" />
+	{:else}
+		<Skeleton grid={true} count={1} height="10vh" />
+		<Skeleton grid={true} count={1} height="80vh" />
+	{/if}
+{:else}
+	<Announcement />
+
+	<div class="container">
+		<div class="card card-centered header" class:header-hidden={!isHeaderVisible}>
+			<div>
+				<a href={root('/')} class="header-item">{$locale().navigation.home}</a><a
+					href={root('/completed')}
+					class="header-item"
+				>
+					{$locale().navigation.completed}
+				</a>
 				<Dropdown
 					items={[
-						{ name: $locale().navigation.myProfile, url: root(`/user/${$userIdentity.name}`) },
-						{
-							name: $locale().navigation.myBadgeWall,
-							url: root(`/user/${$userIdentity.name}/badges`)
-						},
-						{
-							name: $locale().navigation.logOut,
-							url: '#',
-							preventDefault: true,
-							onClick: () => {
-								localStorage.removeItem('identity');
-								localStorage.removeItem('commit');
-
-								document.cookie = 'user=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
-
-								window.location.href = root('/api/authentication/log-out');
-							}
-						}
+						{ name: $locale().navigation.subtitleSchedule, url: root('/schedule') },
+						{ name: $locale().navigation.hololive, url: root('/hololive') },
+						{ name: $locale().tools.tool.characterBirthdays.short, url: root('/birthdays') },
+						{ name: $locale().navigation.newReleases, url: root('/updates') }
 					]}
 					header={false}
 				>
-					<span slot="title" class="header-item">
-						{$locale().navigation.profile}
-					</span>
+					<span slot="title" class="header-item">{$locale().navigation.schedule}</span>
 				</Dropdown>
-			{/if}
-
-			{#if data.user === undefined}
-				<a
-					class="header-item"
-					href={`https://anilist.co/api/v2/oauth/authorize?client_id=${env.PUBLIC_ANILIST_CLIENT_ID}&redirect_uri=${env.PUBLIC_ANILIST_REDIRECT_URI}&response_type=code`}
-					on:click={() => {
-						localStorage.setItem(
-							'redirect',
-							window.location.origin + window.location.pathname + window.location.search
-						);
-					}}
-				>
-					{$locale().navigation.logIn}
-				</a>
-			{:else if data.user}
-				<a href={root(`/user/${$userIdentity.name}`)} class="header-item">
-					<img class="avatar" src={$userIdentity.avatar} alt="Avatar" />
-				</a>
-			{/if}
+				<a href={root('/tools')} class="header-item">{$locale().navigation.tools}</a>
+				<a href={root('/settings')} class="header-item">{$locale().navigation.settings}</a>
+
+				<span class="header-item opaque separator">•</span>
+
+				{#if data.user}
+					<Dropdown
+						items={[
+							{ name: $locale().navigation.myProfile, url: root(`/user/${$userIdentity.name}`) },
+							{
+								name: $locale().navigation.myBadgeWall,
+								url: root(`/user/${$userIdentity.name}/badges`)
+							},
+							{
+								name: $locale().navigation.logOut,
+								url: '#',
+								preventDefault: true,
+								onClick: () => {
+									localStorage.removeItem('identity');
+									localStorage.removeItem('commit');
+
+									document.cookie = 'user=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+
+									window.location.href = root('/api/authentication/log-out');
+								}
+							}
+						]}
+						header={false}
+					>
+						<span slot="title" class="header-item">
+							{$locale().navigation.profile}
+						</span>
+					</Dropdown>
+				{/if}
+
+				{#if data.user === undefined}
+					<a
+						class="header-item"
+						href={`https://anilist.co/api/v2/oauth/authorize?client_id=${env.PUBLIC_ANILIST_CLIENT_ID}&redirect_uri=${env.PUBLIC_ANILIST_REDIRECT_URI}&response_type=code`}
+						on:click={() => {
+							localStorage.setItem(
+								'redirect',
+								window.location.origin + window.location.pathname + window.location.search
+							);
+						}}
+					>
+						{$locale().navigation.logIn}
+					</a>
+				{:else if data.user}
+					<a href={root(`/user/${$userIdentity.name}`)} class="header-item">
+						<img class="avatar" src={$userIdentity.avatar} alt="Avatar" />
+					</a>
+				{/if}
+			</div>
 		</div>
-	</div>
 
-	<p />
-
-	<Notifications item={Notification} zIndex={5000}>
-		<Root {data} {way}>
-			{#if $userIdentity.id !== -1}
-				<slot />
-			{:else if data.url === '/settings'}
-				<Skeleton />
-			{:else if data.url === '/tools'}
-				<Skeleton count={1} height="75vh" />
-			{:else if data.url === '/schedule'}
-				<Skeleton grid={true} width="50%" count={2} height="25vh" />
-			{:else}
-				<Skeleton grid={true} width="50%" count={2} height="25vh" />
-			{/if}
-		</Root>
-	</Notifications>
-</div>
+		<p />
+
+		<Notifications item={Notification} zIndex={5000}>
+			<Root {data} {way}>
+				{#if $userIdentity.id !== -1}
+					<slot />
+				{:else if data.url === '/settings'}
+					<Skeleton grid={true} count={1} height="10vh" />
+					<Skeleton grid={true} count={1} height="30vh" />
+					<Skeleton grid={true} count={1} height="30vh" />
+				{:else}
+					<Skeleton grid={true} count={1} height="10vh" />
+					<Skeleton grid={true} count={1} height="80vh" />
+				{/if}
+			</Root>
+		</Notifications>
+	</div>
+{/if}
 
 <style lang="scss">
 	.header {
-- 
cgit v1.2.3