From 830f3a4ea9064cacbb55b1328d1109b06d995682 Mon Sep 17 00:00:00 2001
From: Huakun Shen <huakun.shen@huakunshen.com>
Date: Fri, 28 Mar 2025 05:39:08 -0400
Subject: [PATCH] Enhance loading animation handling in FullScreenLoading
 component

- Integrated conditional rendering for loading animations based on app configuration.
- Updated default loading animation to "kunkun-dancing" in app configuration.
- Adjusted general settings to ensure proper type handling for language labels.
- Modified ui-iframe component to manage full-screen loading state more effectively.
---
 .../common/FullScreenLoading.svelte           | 13 ++--
 .../standalone/general-settings.svelte        |  2 +-
 apps/desktop/src/lib/stores/appConfig.ts      | 68 +------------------
 .../app/extension/ui-iframe/+page.svelte      |  5 +-
 .../routes/app/extension/ui-iframe/+page.ts   |  1 +
 5 files changed, 15 insertions(+), 74 deletions(-)

diff --git a/apps/desktop/src/lib/components/common/FullScreenLoading.svelte b/apps/desktop/src/lib/components/common/FullScreenLoading.svelte
index 6e77d73..85abd02 100644
--- a/apps/desktop/src/lib/components/common/FullScreenLoading.svelte
+++ b/apps/desktop/src/lib/components/common/FullScreenLoading.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { appState } from "@/stores"
+	import { appConfig, appState } from "@/stores"
 	import { cn } from "@/utils"
 	import { Button } from "@kksh/svelte5"
 	import { BorderBeam, Constants, Layouts, TauriLink } from "@kksh/ui"
@@ -25,8 +25,13 @@
 	>
 		<ArrowLeftIcon class="size-4" />
 	</Button>
-	<Dance class="absolute z-50 h-screen opacity-20" />
-	<LoaderCircleIcon class="h-24 w-24 animate-spin" />
-	<span class="font-mono">Loading</span>
+	{#if $appConfig.loadingAnimation === "kunkun-dancing"}
+		<!-- <DanceTransition delay={300} autoHide={false} show={!uiControl.iframeLoaded} /> -->
+		<Dance class="absolute z-50 h-screen opacity-20" />
+	{:else}
+		<!-- <LoadingAnimation delay={300} autoHide={false} show={!uiControl.iframeLoaded} /> -->
+		<LoaderCircleIcon class="h-24 w-24 animate-spin" />
+		<span class="font-mono">Loading</span>
+	{/if}
 	<BorderBeam size={150} duration={12} />
 </Layouts.Center>
diff --git a/apps/desktop/src/lib/components/standalone/general-settings.svelte b/apps/desktop/src/lib/components/standalone/general-settings.svelte
index 0a8549d..d28968c 100644
--- a/apps/desktop/src/lib/components/standalone/general-settings.svelte
+++ b/apps/desktop/src/lib/components/standalone/general-settings.svelte
@@ -18,7 +18,7 @@
 
 	const languages = availableLanguageTags.map((lang) => ({
 		value: lang,
-		label: LanguageMap[lang] ?? lang
+		label: LanguageMap[lang as keyof typeof LanguageMap] ?? lang
 	}))
 	let loadingAnimation = $state<LoadingAnimation>("spinning-circle")
 	const loadingAnimations = ["spinning-circle", "kunkun-dancing"] as const
diff --git a/apps/desktop/src/lib/stores/appConfig.ts b/apps/desktop/src/lib/stores/appConfig.ts
index 69ab371..b49de39 100644
--- a/apps/desktop/src/lib/stores/appConfig.ts
+++ b/apps/desktop/src/lib/stores/appConfig.ts
@@ -30,7 +30,7 @@ export const defaultAppConfig: AppConfigState = {
 	onBoarded: false,
 	developerMode: false,
 	appSearchPaths: [],
-	loadingAnimation: "spinning-circle"
+	loadingAnimation: "kunkun-dancing"
 }
 
 export const appConfigLoaded = writable(false)
@@ -105,72 +105,6 @@ class AppConfigStore extends Store<AppConfigState> implements AppConfigAPI {
 	}
 }
 
-// function createAppConfig(): WithSyncStore<AppConfigState & { language: string }> & AppConfigAPI {
-// 	const store = createTauriSyncStore("app-config", defaultAppConfig)
-
-// 	async function init() {
-// 		debug("Initializing app config")
-// 		const persistStore = await load("kk-config.json", { autoSave: true })
-// 		let loadedConfig = await persistStore.get("config")
-// 		if (typeof loadedConfig === "object") {
-// 			loadedConfig = { ...defaultAppConfig, ...loadedConfig }
-// 		}
-// 		const parseRes = v.safeParse(PersistedAppConfig, loadedConfig)
-// 		if (parseRes.success) {
-// 			console.log("Parse Persisted App Config Success", parseRes.output)
-// 			const extensionsInstallDir = await getExtensionsFolder()
-// 			store.update((config) => ({
-// 				...config,
-// 				...parseRes.output,
-// 				isInitialized: true,
-// 				extensionsInstallDir,
-// 				platform: os.platform()
-// 			}))
-// 		} else {
-// 			error("Failed to parse app config, going to remove it and reinitialize")
-// 			console.error(v.flatten<typeof PersistedAppConfig>(parseRes.issues))
-// 			await persistStore.clear()
-// 			await persistStore.set("config", v.parse(PersistedAppConfig, defaultAppConfig))
-// 		}
-// 		store.subscribe(async (config) => {
-// 			console.log("Saving app config", config)
-// 			await persistStore.set("config", config)
-// 			updateTheme(config.theme)
-// 		})
-// 	}
-
-// 	return {
-// 		...store,
-// 		get: () => get(store),
-// 		setTheme: (theme: ThemeConfig) => store.update((config) => ({ ...config, theme })),
-// 		setDevExtensionPath: (devExtensionPath: string | null) => {
-// 			console.log("setDevExtensionPath", devExtensionPath)
-// 			store.update((config) => ({ ...config, devExtensionPath }))
-// 		},
-// 		setTriggerHotkey: (triggerHotkey: string[]) => {
-// 			store.update((config) => ({ ...config, triggerHotkey }))
-// 		},
-// 		setOnBoarded: (onBoarded: boolean) => {
-// 			store.update((config) => ({ ...config, onBoarded }))
-// 		},
-// 		setLanguage: (language: string) => {
-// 			store.update((config) => ({ ...config, language }))
-// 		},
-// 		addAppSearchPath: (appSearchPath: SearchPath) => {
-// 			store.update((config) => ({
-// 				...config,
-// 				appSearchPaths: [...config.appSearchPaths, appSearchPath]
-// 			}))
-// 		},
-// 		removeAppSearchPath: (appSearchPath: SearchPath) => {
-// 			store.update((config) => ({
-// 				...config,
-// 				appSearchPaths: config.appSearchPaths.filter((path) => path.path !== appSearchPath.path)
-// 			}))
-// 		},
-// 		init
-// 	}
-// }
 
 // export const appConfig = createAppConfig()
 export const appConfig = new AppConfigStore()
diff --git a/apps/desktop/src/routes/app/extension/ui-iframe/+page.svelte b/apps/desktop/src/routes/app/extension/ui-iframe/+page.svelte
index 4fc1d2d..7ecda60 100644
--- a/apps/desktop/src/routes/app/extension/ui-iframe/+page.svelte
+++ b/apps/desktop/src/routes/app/extension/ui-iframe/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import DanceTransition from "@/components/dance/dance-transition.svelte"
 	import { i18n } from "@/i18n"
-	import { appConfig, winExtMap } from "@/stores"
+	import { appConfig, appState, winExtMap } from "@/stores"
 	import { helperAPI } from "@/utils/helper"
 	import { paste } from "@/utils/hotkey"
 	import { goBackOnEscape } from "@/utils/key"
@@ -163,10 +163,12 @@
 		setTimeout(() => {
 			iframeRef.focus()
 			uiControl.iframeLoaded = true
+			appState.setFullScreenLoading(false)
 		}, 300)
 	}
 
 	onMount(() => {
+		appState.setFullScreenLoading(true)
 		setTimeout(() => {
 			appWin.show()
 		}, 200)
@@ -238,7 +240,6 @@
 {/if}
 
 <main class="h-screen">
-	<DanceTransition delay={300} autoHide={false} show={!uiControl.iframeLoaded} />
 	<iframe
 		bind:this={iframeRef}
 		class={cn("h-full", {
diff --git a/apps/desktop/src/routes/app/extension/ui-iframe/+page.ts b/apps/desktop/src/routes/app/extension/ui-iframe/+page.ts
index b4e7083..ddd4501 100644
--- a/apps/desktop/src/routes/app/extension/ui-iframe/+page.ts
+++ b/apps/desktop/src/routes/app/extension/ui-iframe/+page.ts
@@ -11,6 +11,7 @@ import { toast } from "svelte-sonner"
 import * as v from "valibot"
 import { z } from "zod"
 import type { PageLoad } from "./$types"
+import { appState } from "@/stores/appState"
 
 export const load: PageLoad = async ({
 	url,