fix: Prevent FOUC and repetitive setting of about info

Ushie · Ushie · commit ebe952304141 · 2025-07-03T02:45:00.000+03:00
diff --git a/src/app.html b/src/app.html
@@ -21,7 +21,7 @@
 		%sveltekit.head%
 	</head>
 
-	<body>
+	<body style="background-color: var(--background-one)">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/app.scss b/src/app.scss
@@ -23,7 +23,6 @@ html {
 body {
 	margin: 0;
 	padding: 0;
-	background-color: var(--background-one);
 }
 
 html,
diff --git a/src/data/api/settings.ts b/src/data/api/settings.ts
@@ -16,8 +16,6 @@ export function api_base_url(): string {
 	if (browser) {
 		const apiUrl = localStorage.getItem(URL_KEY) || default_api_url;
 
-		set_about_info(apiUrl);
-
 		return apiUrl;
 	}
 
@@ -46,11 +44,11 @@ export function set_api_base_url(url?: string) {
 		localStorage.removeItem(URL_KEY);
 	} else {
 		localStorage.setItem(URL_KEY, url);
-		set_about_info(url);
 	}
+	set_about_info(api_base_url());
 }
 
-function set_about_info(apiUrl: string) {
+export function set_about_info(apiUrl: string) {
 	if (!localStorage.getItem(STATUS_KEY) || !localStorage.getItem(EMAIL_KEY)) {
 		fetch(`${apiUrl}/v4/about`)
 			.then((response) => (response.ok ? response.json() : null))
diff --git a/src/layout/Footer/FooterHost.svelte b/src/layout/Footer/FooterHost.svelte
@@ -78,7 +78,6 @@
 
 <style lang="scss">
 	footer {
-		background-color: var(--background-one);
 		max-width: min(87%, 100rem);
 		padding: 5rem 0rem;
 		margin: 0 auto;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -24,6 +24,7 @@
 	import { events as themeEvents } from '$util/themeEvents';
 
 	import FooterHost from '$layout/Footer/FooterHost.svelte';
+	import { api_base_url, set_about_info } from '$data/api/settings';
 
 	const queryClient = new QueryClient({
 		defaultOptions: {
@@ -50,6 +51,7 @@
 	);
 
 	onMount(() => {
+		set_about_info(api_base_url());
 		new DateTriggerEventHandler(themeEvents);
 
 		isRestoring.set(true);

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,6 @@ html {`
`23`	`23`	`body {`
`24`	`24`	`margin: 0;`
`25`	`25`	`padding: 0;`
`26`		`- background-color: var(--background-one);`
`27`	`26`	`}`
`28`	`27`
`29`	`28`	`html,`
Original file line number	Diff line number	Diff line change
`@@ -16,8 +16,6 @@ export function api_base_url(): string {`
`16`	`16`	`if (browser) {`
`17`	`17`	`const apiUrl = localStorage.getItem(URL_KEY) \|\| default_api_url;`
`18`	`18`
`19`		`- set_about_info(apiUrl);`
`20`		`-`
`21`	`19`	`return apiUrl;`
`22`	`20`	`}`
`23`	`21`
`@@ -46,11 +44,11 @@ export function set_api_base_url(url?: string) {`
`46`	`44`	`localStorage.removeItem(URL_KEY);`
`47`	`45`	`} else {`
`48`	`46`	`localStorage.setItem(URL_KEY, url);`
`49`		`- set_about_info(url);`
`50`	`47`	`}`
	`48`	`+ set_about_info(api_base_url());`
`51`	`49`	`}`
`52`	`50`
`53`		`-function set_about_info(apiUrl: string) {`
	`51`	`+export function set_about_info(apiUrl: string) {`
`54`	`52`	`if (!localStorage.getItem(STATUS_KEY) \|\| !localStorage.getItem(EMAIL_KEY)) {`
`55`	`53`	fetch(`${apiUrl}/v4/about`)
`56`	`54`	`.then((response) => (response.ok ? response.json() : null))`