From 9cf06b1835371eb123ef58e2d8f8dcd4224bd425 Mon Sep 17 00:00:00 2001
From: Huakun <huakun.shen@huakunshen.com>
Date: Fri, 28 Mar 2025 07:45:25 -0400
Subject: [PATCH] Feature: custom transition animation (#266)

* Add loading animation to general settings

* Update dependencies and integrate @tauri-store/svelte

- Added `bon` and `bon-macros` packages to Cargo.lock.
- Upgraded `tauri-plugin-svelte`, `tauri-store`, and related packages to their latest versions.
- Updated `@tauri-store/svelte` integration in the desktop app, including changes to app configuration and layout handling.
- Adjusted pnpm-lock.yaml to reflect updated package versions and added new dependencies.
- Introduced a new app configuration file for development.

* 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.

* remove a mis-placed config file

* Refactor window handling to ensure focus after showing

- Updated various components to use promise chaining with `show()` and `setFocus()` for better window management.
- Introduced `data.win` in multiple places to streamline access to the current webview window.
- Enhanced splashscreen and app layout handling to improve user experience by ensuring the window is focused after being shown.

* Refactor window handling to improve safety and consistency

- Introduced optional chaining for `data.win` to prevent potential runtime errors when accessing window methods.
- Updated various components to ensure proper handling of window focus and visibility.
- Enhanced the layout and extension pages to utilize the current webview window more effectively, improving overall user experience.
---
 Cargo.lock                                    | 46 ++++++++---
 apps/desktop/package.json                     |  1 +
 apps/desktop/src-tauri/Cargo.toml             |  2 +-
 .../src-tauri/capabilities/default.json       |  1 +
 apps/desktop/src-tauri/src/lib.rs             |  2 +-
 apps/desktop/src/lib/cmds/builtin.ts          |  2 +-
 .../common/FullScreenLoading.svelte           | 13 +++-
 .../standalone/general-settings.svelte        | 31 +++++++-
 apps/desktop/src/lib/stores/appConfig.ts      | 77 ++-----------------
 apps/desktop/src/lib/utils/hotkey.ts          |  3 +-
 apps/desktop/src/lib/utils/key.ts             |  2 +-
 apps/desktop/src/routes/+layout.ts            | 10 +++
 apps/desktop/src/routes/app/+layout.svelte    |  5 +-
 apps/desktop/src/routes/app/+layout.ts        |  6 +-
 apps/desktop/src/routes/app/+page.svelte      | 10 ++-
 .../app/extension/key-displayer/+page.svelte  |  7 +-
 .../app/extension/pin-screenshot/+page.svelte | 19 ++---
 .../app/extension/ui-iframe/+page.svelte      | 18 ++---
 .../routes/app/extension/ui-iframe/+page.ts   |  1 +
 .../app/extension/ui-worker/+page.svelte      |  2 +-
 .../src/routes/splashscreen/+page.svelte      |  8 +-
 packages/types/src/appConfig.ts               |  6 +-
 pnpm-lock.yaml                                | 75 ++++++++++++------
 23 files changed, 198 insertions(+), 149 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index b1bf5e6..9f60b90 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -824,6 +824,31 @@ dependencies = [
  "piper",
 ]
 
+[[package]]
+name = "bon"
+version = "3.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "65268237be94042665b92034f979c42d431d2fd998b49809543afe3e66abad1c"
+dependencies = [
+ "bon-macros",
+ "rustversion",
+]
+
+[[package]]
+name = "bon-macros"
+version = "3.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "803c95b2ecf650eb10b5f87dda6b9f6a1b758cee53245e2b7b825c9b3803a443"
+dependencies = [
+ "darling",
+ "ident_case",
+ "prettyplease",
+ "proc-macro2",
+ "quote",
+ "rustversion",
+ "syn 2.0.87",
+]
+
 [[package]]
 name = "borsh"
 version = "1.3.0"
@@ -8003,9 +8028,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-plugin-svelte"
-version = "1.2.1"
+version = "2.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dab0a4d739af1108c6572e6249113190135c66a45586d0f8f93b3ee532e6176f"
+checksum = "17e96f88b3c614b98cea3afb5de6e2661d32f82c70423ae125c56a25d62017e6"
 dependencies = [
  "serde",
  "tauri",
@@ -8136,9 +8161,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-store"
-version = "0.8.1"
+version = "0.10.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cb4e7c0776d9f8b54fd4788f4e471ce83b4c6cf62079799830a3735582a51fc4"
+checksum = "5a33c8afdf92c1b177296c0299f6d20116cbce0fa1e2264819fea8c80fd31774"
 dependencies = [
  "dashmap",
  "futures",
@@ -8155,9 +8180,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-store-macros"
-version = "0.8.1"
+version = "0.10.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fabed02238bc887f75887b315c6a14d9571ab463c1a188cc27ec2f7e917b06c3"
+checksum = "c8857e4240cf6dbabb15fc2d595e92abba404f0a5cce0f3abbfe9316cac4aa99"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -8166,11 +8191,14 @@ dependencies = [
 
 [[package]]
 name = "tauri-store-utils"
-version = "0.2.2"
+version = "0.4.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b983a259b22d622ce74b957140efa161bd75c6bfd47b7bf621c98dd05b1a2474"
+checksum = "14376c237a6632663991634d51a31f128b6b381b94d65e747db2419a513ae6d8"
 dependencies = [
- "futures",
+ "bon",
+ "semver",
+ "serde",
+ "serde_json",
  "tauri",
  "thiserror 2.0.3",
  "tokio",
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index 982388a..04eafea 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -28,6 +28,7 @@
 		"@tauri-apps/plugin-autostart": "^2.2.0",
 		"@tauri-apps/plugin-shell": "^2.2.0",
 		"@tauri-apps/plugin-stronghold": "^2.2.0",
+		"@tauri-store/svelte": "^2.1.1",
 		"dompurify": "^3.2.4",
 		"eslint": "^9.21.0",
 		"fuse.js": "^7.1.0",
diff --git a/apps/desktop/src-tauri/Cargo.toml b/apps/desktop/src-tauri/Cargo.toml
index 80f009c..902bb98 100644
--- a/apps/desktop/src-tauri/Cargo.toml
+++ b/apps/desktop/src-tauri/Cargo.toml
@@ -71,4 +71,4 @@ tauri-plugin-cli = "2"
 tauri-plugin-global-shortcut = "2.0.1"
 tauri-plugin-single-instance = { version = "2", features = ["deep-link"] }
 tauri-plugin-updater = "2.0.2"
-tauri-plugin-svelte = "1.2.1"
+tauri-plugin-svelte = "2.1.1"
diff --git a/apps/desktop/src-tauri/capabilities/default.json b/apps/desktop/src-tauri/capabilities/default.json
index 3061496..04b1c29 100644
--- a/apps/desktop/src-tauri/capabilities/default.json
+++ b/apps/desktop/src-tauri/capabilities/default.json
@@ -24,6 +24,7 @@
 		"core:event:default",
 		"core:window:default",
 		"core:window:allow-set-size",
+		"core:window:allow-set-enabled",
 		"core:window:allow-start-dragging",
 		"core:window:allow-set-focus",
 		"core:window:allow-toggle-maximize",
diff --git a/apps/desktop/src-tauri/src/lib.rs b/apps/desktop/src-tauri/src/lib.rs
index 9777cb6..dff6f45 100644
--- a/apps/desktop/src-tauri/src/lib.rs
+++ b/apps/desktop/src-tauri/src/lib.rs
@@ -27,7 +27,7 @@ use utils::server::tauri_file_server;
 pub fn run() {
     let context = tauri::generate_context!();
     let mut builder = tauri::Builder::default();
-
+    // let app_data_path = tauri::path::PathResolver::app_data_dir().unwrap();
     // let db_key = if cfg!(debug_assertions) {
     //     None
     // } else {
diff --git a/apps/desktop/src/lib/cmds/builtin.ts b/apps/desktop/src/lib/cmds/builtin.ts
index 0a9a992..57015db 100644
--- a/apps/desktop/src/lib/cmds/builtin.ts
+++ b/apps/desktop/src/lib/cmds/builtin.ts
@@ -411,7 +411,7 @@ export const rawBuiltinCmds: BuiltinCmd[] = [
 				visible: false
 			})
 			setTimeout(() => {
-				window.show()
+				window.show().then(() => window.setFocus())
 			}, 2_000)
 		}
 	},
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 52ebc46..d28968c 100644
--- a/apps/desktop/src/lib/components/standalone/general-settings.svelte
+++ b/apps/desktop/src/lib/components/standalone/general-settings.svelte
@@ -11,20 +11,24 @@
 	} from "@/paraglide/runtime"
 	import { appConfig } from "@/stores"
 	import { Select, Switch } from "@kksh/svelte5"
+	import type { LoadingAnimation } from "@kksh/types"
 	import * as autoStart from "@tauri-apps/plugin-autostart"
 	import { onMount } from "svelte"
 	import { toast } from "svelte-sonner"
 
 	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
 	let launchAtLogin = $state(false)
 	let language = $state(languageTag())
 	onMount(() => {
 		autoStart.isEnabled().then((enabled) => {
 			launchAtLogin = enabled
 		})
+		loadingAnimation = $appConfig.loadingAnimation
 	})
 	const triggerContent = $derived(languages.find((f) => f.value === language)?.label ?? "Language")
 </script>
@@ -101,6 +105,31 @@
 			</Select.Content>
 		</Select.Root>
 	</li>
+	<li>
+		<span>Loading Animation</span>
+
+		<Select.Root type="single" name="loadingAnimation" bind:value={loadingAnimation}>
+			<Select.Trigger class="w-fit">
+				{loadingAnimation}
+			</Select.Trigger>
+			<Select.Content>
+				<Select.Group>
+					<Select.GroupHeading>Loading Animation</Select.GroupHeading>
+					{#each loadingAnimations as anim}
+						<Select.Item
+							onclick={() => {
+								appConfig.setLoadingAnimation(anim)
+							}}
+							value={anim}
+							label={anim}
+						>
+							{anim}
+						</Select.Item>
+					{/each}
+				</Select.Group>
+			</Select.Content>
+		</Select.Root>
+	</li>
 </ul>
 
 <style scoped>
diff --git a/apps/desktop/src/lib/stores/appConfig.ts b/apps/desktop/src/lib/stores/appConfig.ts
index 3c2fcba..f4e380a 100644
--- a/apps/desktop/src/lib/stores/appConfig.ts
+++ b/apps/desktop/src/lib/stores/appConfig.ts
@@ -1,13 +1,13 @@
 import { getExtensionsFolder } from "@/constants"
 import type { SearchPath } from "@kksh/api/models"
 import { updateTheme, type ThemeConfig } from "@kksh/svelte5"
-import { PersistedAppConfig, type AppConfigState } from "@kksh/types"
+import { LoadingAnimation, PersistedAppConfig, type AppConfigState } from "@kksh/types"
 import { debug, error, info } from "@tauri-apps/plugin-log"
 import * as os from "@tauri-apps/plugin-os"
 import { load } from "@tauri-apps/plugin-store"
+import { Store } from "@tauri-store/svelte"
 import { toast } from "svelte-sonner"
 import { get, writable } from "svelte/store"
-import { Store } from "tauri-plugin-svelte"
 import * as v from "valibot"
 
 export const defaultAppConfig: AppConfigState = {
@@ -29,7 +29,8 @@ export const defaultAppConfig: AppConfigState = {
 	joinBetaProgram: false,
 	onBoarded: false,
 	developerMode: false,
-	appSearchPaths: []
+	appSearchPaths: [],
+	loadingAnimation: "kunkun-dancing"
 }
 
 export const appConfigLoaded = writable(false)
@@ -99,74 +100,10 @@ class AppConfigStore extends Store<AppConfigState> implements AppConfigAPI {
 			appSearchPaths: config.appSearchPaths.filter((path) => path.path !== appSearchPath.path)
 		}))
 	}
+	setLoadingAnimation(loadingAnimation: LoadingAnimation) {
+		this.update((config) => ({ ...config, loadingAnimation }))
+	}
 }
 
-// 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/lib/utils/hotkey.ts b/apps/desktop/src/lib/utils/hotkey.ts
index 6dad44d..a9b4b0e 100644
--- a/apps/desktop/src/lib/utils/hotkey.ts
+++ b/apps/desktop/src/lib/utils/hotkey.ts
@@ -48,8 +48,7 @@ export async function registerAppHotkey(hotkeyStr: string) {
 					mainWin.setFocus()
 				}
 			} else {
-				mainWin.show()
-				mainWin.setFocus()
+				mainWin.show().then(() => mainWin.setFocus())
 			}
 		}
 	})
diff --git a/apps/desktop/src/lib/utils/key.ts b/apps/desktop/src/lib/utils/key.ts
index 3c27522..57cbdc0 100644
--- a/apps/desktop/src/lib/utils/key.ts
+++ b/apps/desktop/src/lib/utils/key.ts
@@ -97,7 +97,7 @@ export async function globalKeyDownHandler(e: KeyboardEvent) {
 		await appWin.hide()
 		location.reload()
 		setTimeout(() => {
-			appWin.show()
+			appWin.show().then(() => appWin.setFocus())
 		}, 1_000)
 	}
 }
diff --git a/apps/desktop/src/routes/+layout.ts b/apps/desktop/src/routes/+layout.ts
index 8d7e6d2..cc6d9dd 100644
--- a/apps/desktop/src/routes/+layout.ts
+++ b/apps/desktop/src/routes/+layout.ts
@@ -1,5 +1,15 @@
+import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow"
+import { browser } from "$app/environment"
+
 // Tauri doesn't have a Node.js server to do proper SSR
 // so we will use adapter-static to prerender the app (SSG)
 // See: https://v2.tauri.app/start/frontend/sveltekit/ for more info
 export const prerender = true
 export const ssr = false
+
+export const load = () => {
+	if (browser) {
+		const win = getCurrentWebviewWindow()
+		return { win }
+	}
+}
diff --git a/apps/desktop/src/routes/app/+layout.svelte b/apps/desktop/src/routes/app/+layout.svelte
index 0c9f71f..51457ea 100644
--- a/apps/desktop/src/routes/app/+layout.svelte
+++ b/apps/desktop/src/routes/app/+layout.svelte
@@ -46,7 +46,8 @@
 		})
 	})
 
-	let { children } = $props()
+	let { children, data } = $props()
+
 	const unlisteners: UnlistenFn[] = []
 	onDestroy(() => {
 		unlisteners.forEach((unlistener) => unlistener())
@@ -100,7 +101,7 @@
 				})
 			)
 		}
-		getCurrentWebviewWindow().show()
+		data.win?.show().then(() => data.win?.setFocus())
 	})
 </script>
 
diff --git a/apps/desktop/src/routes/app/+layout.ts b/apps/desktop/src/routes/app/+layout.ts
index 8af157c..140c97b 100644
--- a/apps/desktop/src/routes/app/+layout.ts
+++ b/apps/desktop/src/routes/app/+layout.ts
@@ -1,7 +1,11 @@
 import { getExtensionsFolder, IS_IN_TAURI } from "@/constants"
+import * as path from "@tauri-apps/api/path"
 import { error } from "@tauri-apps/plugin-log"
+import { setStoreCollectionPath } from "@tauri-store/svelte"
 import type { LayoutLoad } from "./$types"
 
 export const load: LayoutLoad = async () => {
-	return { extsInstallDir: IS_IN_TAURI ? await getExtensionsFolder() : "" }
+	const appDataPath = await path.appDataDir()
+	await setStoreCollectionPath(await path.join(appDataPath, "kk-config"))
+	return { extsInstallDir: IS_IN_TAURI ? await getExtensionsFolder() : "", appDataPath }
 }
diff --git a/apps/desktop/src/routes/app/+page.svelte b/apps/desktop/src/routes/app/+page.svelte
index 50bf56a..ec3a446 100644
--- a/apps/desktop/src/routes/app/+page.svelte
+++ b/apps/desktop/src/routes/app/+page.svelte
@@ -64,12 +64,16 @@
 			if (splashscreenWin) {
 				splashscreenWin.close()
 			}
-			win.show()
+			win.show().then(() => win.setFocus())
 		})
 		win.onFocusChanged(({ payload: focused }) => {
 			if (focused) {
-				win.show()
-				inputEle?.focus()
+				win
+					.show()
+					.then(() => win.setFocus())
+					.finally(() => {
+						inputEle?.focus()
+					})
 			}
 		})
 		inputEle?.focus()
diff --git a/apps/desktop/src/routes/app/extension/key-displayer/+page.svelte b/apps/desktop/src/routes/app/extension/key-displayer/+page.svelte
index b7a90e9..8dce509 100644
--- a/apps/desktop/src/routes/app/extension/key-displayer/+page.svelte
+++ b/apps/desktop/src/routes/app/extension/key-displayer/+page.svelte
@@ -8,6 +8,8 @@
 	import * as userInput from "tauri-plugin-user-input-api"
 	import { type InputEvent } from "tauri-plugin-user-input-api"
 
+	let { data } = $props()
+
 	const SymbolMap = {
 		Alt: "⎇",
 		AltGr: "⌥",
@@ -97,10 +99,7 @@
 	}
 
 	$effect(() => {
-		const win = getCurrentWebviewWindow()
-		if (win) {
-			win.show()
-		}
+		data.win?.show().then(() => data.win?.setFocus())
 
 		userInput.setEventTypes([userInput.EventTypeEnum.KeyPress, userInput.EventTypeEnum.KeyRelease])
 		userInput.startListening((evt: InputEvent) => {
diff --git a/apps/desktop/src/routes/app/extension/pin-screenshot/+page.svelte b/apps/desktop/src/routes/app/extension/pin-screenshot/+page.svelte
index 3b68c0e..ef04a5a 100644
--- a/apps/desktop/src/routes/app/extension/pin-screenshot/+page.svelte
+++ b/apps/desktop/src/routes/app/extension/pin-screenshot/+page.svelte
@@ -8,23 +8,24 @@
 	import * as clipboard from "tauri-plugin-clipboard-api"
 
 	let image = $state<string | null>(null)
-	const appWin = getCurrentWebviewWindow()
+	let { data } = $props()
 	let originalSize = $state<{ width: number; height: number } | null>(null)
 	let originalScaleFactor = $state<number | null>(null)
 	let scale = $state<number>(1)
 	let currentSize = $derived(
 		originalSize ? { width: originalSize.width * scale, height: originalSize.height * scale } : null
 	)
+	const win = getCurrentWebviewWindow()
 
 	$effect(() => {
 		if (currentSize) {
-			appWin.setSize(new LogicalSize(currentSize.width, currentSize.height))
+			win.setSize(new LogicalSize(currentSize.width, currentSize.height))
 		}
 	})
 
 	async function getWindowSize() {
-		const size = await appWin.outerSize()
-		const scaleFactor = originalScaleFactor ?? (await appWin.scaleFactor())
+		const size = await win.outerSize()
+		const scaleFactor = originalScaleFactor ?? (await win.scaleFactor())
 		const logicalSize = size.toLogical(scaleFactor)
 		return { logicalSize, scaleFactor }
 	}
@@ -36,7 +37,7 @@
 				image = b64
 			})
 			.finally(() => {
-				appWin.show()
+				data.win?.show().then(() => data.win?.setFocus())
 			})
 		const { logicalSize, scaleFactor } = await getWindowSize()
 		originalSize = { width: logicalSize.width, height: logicalSize.height }
@@ -67,13 +68,13 @@
 <svelte:window
 	on:keydown={(e) => {
 		if (e.key === "Escape") {
-			appWin.close()
+			win.close()
 		}
 	}}
 />
-<Button size="icon" variant="ghost" class="fixed left-2 top-2" onclick={() => appWin.close()}
-	><CircleX /></Button
->
+<Button size="icon" variant="ghost" class="fixed left-2 top-2" onclick={() => win.close()}>
+	<CircleX />
+</Button>
 <main class="z-50 h-screen w-screen overflow-hidden" data-tauri-drag-region>
 	{#if image}
 		<img
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..8674f6d 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"
@@ -38,7 +38,6 @@
 	let { data }: { data: PageData } = $props()
 	const { loadedExt, url, extPath, extInfoInDB } = data
 	let extSpawnedProcesses = $state<number[]>([])
-	const appWin = getCurrentWindow()
 	let iframeRef: HTMLIFrameElement
 	let uiControl = $state<{
 		iframeLoaded: boolean
@@ -65,7 +64,7 @@
 			if (isInMainWindow()) {
 				goto(i18n.resolveRoute("/app/"))
 			} else {
-				appWin.close()
+				data.win?.close()
 			}
 		},
 		hideBackButton: async () => {
@@ -131,7 +130,7 @@
 			},
 			getSpawnedProcesses: () => Promise.resolve(extSpawnedProcesses),
 			paste: async () => {
-				await appWin.hide()
+				await data.win?.hide()
 				await sleep(200)
 				return paste()
 			}
@@ -155,7 +154,7 @@
 		if (isInMainWindow()) {
 			goHome()
 		} else {
-			appWin.close()
+			data.win?.close()
 		}
 	}
 
@@ -163,12 +162,14 @@
 		setTimeout(() => {
 			iframeRef.focus()
 			uiControl.iframeLoaded = true
+			appState.setFullScreenLoading(false)
 		}, 300)
 	}
 
 	onMount(() => {
+		appState.setFullScreenLoading(true)
 		setTimeout(() => {
-			appWin.show()
+			data.win?.setFocus()
 		}, 200)
 		if (iframeRef?.contentWindow) {
 			const io = new IframeParentIO(iframeRef.contentWindow)
@@ -194,7 +195,7 @@
 	})
 
 	onDestroy(() => {
-		winExtMap.unregisterExtensionFromWindow(appWin.label)
+		winExtMap.unregisterExtensionFromWindow(data.win?.label ?? "")
 	})
 </script>
 
@@ -207,7 +208,7 @@
 		onclick={onBackBtnClicked}
 		style={`${positionToCssStyleString(uiControl.backBtnPosition)}`}
 	>
-		{#if appWin.label === "main"}
+		{#if data.win?.label === "main"}
 			<ArrowLeftIcon class="w-4" />
 		{:else}
 			<XIcon class="w-4" />
@@ -238,7 +239,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..5f13d44 100644
--- a/apps/desktop/src/routes/app/extension/ui-iframe/+page.ts
+++ b/apps/desktop/src/routes/app/extension/ui-iframe/+page.ts
@@ -1,5 +1,6 @@
 import { KunkunIframeExtParams } from "@/cmds/ext"
 import { i18n } from "@/i18n"
+import { appState } from "@/stores/appState"
 import { db, unregisterExtensionWindow } from "@kksh/api/commands"
 import type { Ext as ExtInfoInDB, ExtPackageJsonExtra } from "@kksh/api/models"
 import { loadExtensionManifestFromDisk } from "@kksh/extension"
diff --git a/apps/desktop/src/routes/app/extension/ui-worker/+page.svelte b/apps/desktop/src/routes/app/extension/ui-worker/+page.svelte
index 8f569f6..3afe712 100644
--- a/apps/desktop/src/routes/app/extension/ui-worker/+page.svelte
+++ b/apps/desktop/src/routes/app/extension/ui-worker/+page.svelte
@@ -310,7 +310,7 @@
 	onMount(async () => {
 		setTimeout(() => {
 			appState.setLoadingBar(true)
-			appWin.show()
+			appWin.show().then(() => appWin.setFocus())
 		}, 100)
 		unlistenRefreshWorkerExt = await listenToRefreshDevExt(() => {
 			debug("Refreshing Worker Extension")
diff --git a/apps/desktop/src/routes/splashscreen/+page.svelte b/apps/desktop/src/routes/splashscreen/+page.svelte
index d764d5a..b746a8a 100644
--- a/apps/desktop/src/routes/splashscreen/+page.svelte
+++ b/apps/desktop/src/routes/splashscreen/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { Layouts } from "@kksh/ui"
-	import { getCurrentWindow } from "@tauri-apps/api/window"
 	import { onMount } from "svelte"
 
-	onMount(async () => {
-		const mainWin = await getCurrentWindow()
-		mainWin.show()
+	let { data } = $props()
+
+	onMount(() => {
+		data.win?.show().then(() => data.win?.setFocus())
 	})
 </script>
 
diff --git a/packages/types/src/appConfig.ts b/packages/types/src/appConfig.ts
index 2d6b225..e71fcdd 100644
--- a/packages/types/src/appConfig.ts
+++ b/packages/types/src/appConfig.ts
@@ -2,6 +2,9 @@ import { LightMode, SearchPath } from "@kksh/api/models"
 import type { Platform } from "@tauri-apps/plugin-os"
 import * as v from "valibot"
 
+export const LoadingAnimation = v.union([v.literal("spinning-circle"), v.literal("kunkun-dancing")])
+export type LoadingAnimation = v.InferOutput<typeof LoadingAnimation>
+
 export const PersistedAppConfig = v.object({
 	theme: v.object({
 		theme: v.string(),
@@ -18,7 +21,8 @@ export const PersistedAppConfig = v.object({
 	joinBetaProgram: v.boolean(),
 	onBoarded: v.boolean(),
 	developerMode: v.boolean(),
-	appSearchPaths: v.array(SearchPath)
+	appSearchPaths: v.array(SearchPath),
+	loadingAnimation: LoadingAnimation
 })
 
 export type PersistedAppConfig = v.InferOutput<typeof PersistedAppConfig>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 79586a8..d26b494 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -150,7 +150,7 @@ importers:
     devDependencies:
       '@types/bun':
         specifier: latest
-        version: 1.2.6
+        version: 1.2.8
       '@types/debug':
         specifier: ^4.1.12
         version: 4.1.12
@@ -190,7 +190,7 @@ importers:
     devDependencies:
       '@types/bun':
         specifier: latest
-        version: 1.2.6
+        version: 1.2.8
       '@types/fs-extra':
         specifier: ^11.0.4
         version: 11.0.4
@@ -245,6 +245,9 @@ importers:
       '@tauri-apps/plugin-stronghold':
         specifier: ^2.2.0
         version: 2.2.0
+      '@tauri-store/svelte':
+        specifier: ^2.1.1
+        version: 2.1.1
       dompurify:
         specifier: ^3.2.4
         version: 3.2.4
@@ -329,7 +332,7 @@ importers:
         version: 2.3.1
       '@types/bun':
         specifier: latest
-        version: 1.2.6
+        version: 1.2.8
       '@types/semver':
         specifier: ^7.5.8
         version: 7.5.8
@@ -480,7 +483,7 @@ importers:
     devDependencies:
       '@types/bun':
         specifier: latest
-        version: 1.2.6
+        version: 1.2.8
       '@types/lodash':
         specifier: ^4.17.14
         version: 4.17.14
@@ -520,7 +523,7 @@ importers:
         version: link:../typescript-config
       '@types/bun':
         specifier: latest
-        version: 1.2.6
+        version: 1.2.8
 
   packages/config-eslint:
     dependencies:
@@ -563,7 +566,7 @@ importers:
     devDependencies:
       '@types/bun':
         specifier: latest
-        version: 1.2.6
+        version: 1.2.8
       '@types/semver':
         specifier: ^7.5.8
         version: 7.5.8
@@ -594,7 +597,7 @@ importers:
         version: 11.1.6(rollup@4.34.2)(tslib@2.8.1)(typescript@5.7.3)
       '@types/bun':
         specifier: latest
-        version: 1.2.6
+        version: 1.2.8
       rollup-plugin-visualizer:
         specifier: ^5.12.0
         version: 5.12.0(rollup@4.34.2)
@@ -701,7 +704,7 @@ importers:
     devDependencies:
       '@types/bun':
         specifier: latest
-        version: 1.2.6
+        version: 1.2.8
 
   packages/grpc:
     dependencies:
@@ -720,7 +723,7 @@ importers:
         version: 0.7.13
       '@types/bun':
         specifier: latest
-        version: 1.2.6
+        version: 1.2.8
       '@types/google-protobuf':
         specifier: ^3.15.12
         version: 3.15.12
@@ -748,7 +751,7 @@ importers:
     devDependencies:
       '@types/bun':
         specifier: latest
-        version: 1.2.6
+        version: 1.2.8
       verify-package-export:
         specifier: ^0.0.3
         version: 0.0.3(typescript@5.7.3)
@@ -773,7 +776,7 @@ importers:
         version: 2.48.0
       '@types/bun':
         specifier: latest
-        version: 1.2.6
+        version: 1.2.8
       '@valibot/to-json-schema':
         specifier: 1.0.0
         version: 1.0.0(valibot@1.0.0(typescript@5.7.3))
@@ -786,7 +789,7 @@ importers:
     devDependencies:
       '@types/bun':
         specifier: latest
-        version: 1.2.6
+        version: 1.2.8
 
   packages/tauri-plugins/jarvis:
     dependencies:
@@ -802,7 +805,7 @@ importers:
         version: 2.48.0
       '@types/bun':
         specifier: latest
-        version: 1.2.6
+        version: 1.2.8
 
   packages/templates/template-ext-headless:
     dependencies:
@@ -821,7 +824,7 @@ importers:
     devDependencies:
       '@types/bun':
         specifier: latest
-        version: 1.2.6
+        version: 1.2.8
 
   packages/templates/template-ext-next:
     dependencies:
@@ -1173,7 +1176,7 @@ importers:
     devDependencies:
       '@types/bun':
         specifier: latest
-        version: 1.2.6
+        version: 1.2.8
 
   packages/types:
     dependencies:
@@ -1183,7 +1186,7 @@ importers:
     devDependencies:
       '@types/bun':
         specifier: latest
-        version: 1.2.6
+        version: 1.2.8
 
   packages/typescript-config: {}
 
@@ -1279,7 +1282,7 @@ importers:
         version: 0.1.15(lucide-svelte@0.471.0(svelte@5.20.5))(svelte-sonner@0.3.28(svelte@5.20.5))(svelte@5.20.5)(sveltekit-superforms@2.22.1(@sveltejs/kit@2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.5)(vite@6.2.0(@types/node@22.13.1)(jiti@2.4.0)(terser@5.36.0)(yaml@2.6.1)))(svelte@5.20.5)(vite@6.2.0(@types/node@22.13.1)(jiti@2.4.0)(terser@5.36.0)(yaml@2.6.1)))(@types/json-schema@7.0.15)(svelte@5.20.5)(typescript@5.7.3))(typescript@5.7.3)
       '@types/bun':
         specifier: latest
-        version: 1.2.6
+        version: 1.2.8
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.20.0
         version: 8.20.0(@typescript-eslint/parser@8.20.0(eslint@9.21.0(jiti@2.4.0))(typescript@5.7.3))(eslint@9.21.0(jiti@2.4.0))(typescript@5.7.3)
@@ -1361,7 +1364,7 @@ importers:
     devDependencies:
       '@types/bun':
         specifier: latest
-        version: 1.2.6
+        version: 1.2.8
 
   vendors/tauri-plugin-keyring:
     dependencies:
@@ -5301,6 +5304,12 @@ packages:
   '@tauri-store/shared@0.6.0':
     resolution: {integrity: sha512-2KBezqqkw68HvvXHEtbbpxyQHDjymBUZl10YuAsNRI8DHFIA0n18WE7NRyQ93+H7IzDP1/B41m2/rcMDHBSiKw==}
 
+  '@tauri-store/shared@0.7.2':
+    resolution: {integrity: sha512-42nprNNeU+tjpCvYnaBsu3kYwAy8gP6KyXX9zeaIvpMys1tIhQdEiUAXo3KChHq/jCkSralXRLN4zfjCfBJFrw==}
+
+  '@tauri-store/svelte@2.1.1':
+    resolution: {integrity: sha512-exGvgEM6zcXZq6KRnG2b2JDXogyarRaJdjrblD27Q4IU1vhSTY8TxvDMCPGfD31kbOcf/aR4A6zT8OX0DFuxjg==}
+
   '@trysound/sax@0.2.0':
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
@@ -5342,8 +5351,8 @@ packages:
   '@types/btoa-lite@1.0.2':
     resolution: {integrity: sha512-ZYbcE2x7yrvNFJiU7xJGrpF/ihpkM7zKgw8bha3LNJSesvTtUNxbpzaT7WXBIryf6jovisrxTBvymxMeLLj1Mg==}
 
-  '@types/bun@1.2.6':
-    resolution: {integrity: sha512-fY9CAmTdJH1Llx7rugB0FpgWK2RKuHCs3g2cFDYXUutIy1QGiPQxKkGY8owhfZ4MXWNfxwIbQLChgH5gDsY7vw==}
+  '@types/bun@1.2.8':
+    resolution: {integrity: sha512-t8L1RvJVUghW5V+M/fL3Thbxcs0HwNsXsnTEBEfEVqGteiJToOlZ/fyOEaR1kZsNqnu+3XA4RI/qmnX4w6+S+w==}
 
   '@types/cookie@0.6.0':
     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
@@ -6409,8 +6418,8 @@ packages:
   buffer@6.0.3:
     resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
 
-  bun-types@1.2.6:
-    resolution: {integrity: sha512-FbCKyr5KDiPULUzN/nm5oqQs9nXCHD8dVc64BArxJadCvbNzAI6lUWGh9fSJZWeDIRD38ikceBU8Kj/Uh+53oQ==}
+  bun-types@1.2.7:
+    resolution: {integrity: sha512-P4hHhk7kjF99acXqKvltyuMQ2kf/rzIw3ylEDpCxDS9Xa0X0Yp/gJu/vDCucmWpiur5qJ0lwB2bWzOXa2GlHqA==}
 
   bundle-name@4.1.0:
     resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
@@ -7449,6 +7458,9 @@ packages:
     resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
     engines: {node: '>= 0.4'}
 
+  es-toolkit@1.34.1:
+    resolution: {integrity: sha512-OA6cd94fJV9bm8dWhIySkWq4xV+rAQnBZUr2dnpXam0QJ8c+hurLbKA8/QooL9Mx4WCAxvIDsiEkid5KPQ5xgQ==}
+
   esbuild-runner@2.2.2:
     resolution: {integrity: sha512-fRFVXcmYVmSmtYm2mL8RlUASt2TDkGh3uRcvHFOKNr/T58VrfVeKD9uT9nlgxk96u0LS0ehS/GY7Da/bXWKkhw==}
     hasBin: true
@@ -17414,6 +17426,17 @@ snapshots:
     dependencies:
       '@tauri-apps/api': 2.3.0
 
+  '@tauri-store/shared@0.7.2':
+    dependencies:
+      '@tauri-apps/api': 2.3.0
+      es-toolkit: 1.34.1
+
+  '@tauri-store/svelte@2.1.1':
+    dependencies:
+      '@tauri-apps/api': 2.3.0
+      '@tauri-store/shared': 0.7.2
+      svelte: 5.20.5
+
   '@trysound/sax@0.2.0': {}
 
   '@ts-graphviz/adapter@2.0.5':
@@ -17458,9 +17481,9 @@ snapshots:
 
   '@types/btoa-lite@1.0.2': {}
 
-  '@types/bun@1.2.6':
+  '@types/bun@1.2.8':
     dependencies:
-      bun-types: 1.2.6
+      bun-types: 1.2.7
 
   '@types/cookie@0.6.0': {}
 
@@ -19002,7 +19025,7 @@ snapshots:
       base64-js: 1.5.1
       ieee754: 1.2.1
 
-  bun-types@1.2.6:
+  bun-types@1.2.7:
     dependencies:
       '@types/node': 22.13.1
       '@types/ws': 8.5.14
@@ -20077,6 +20100,8 @@ snapshots:
       is-date-object: 1.0.5
       is-symbol: 1.0.4
 
+  es-toolkit@1.34.1: {}
+
   esbuild-runner@2.2.2(esbuild@0.24.2):
     dependencies:
       esbuild: 0.24.2