From 7375122d40eaca366f8140d38f87204f8eef57d1 Mon Sep 17 00:00:00 2001
From: Huakun Shen <huakun.shen@huakunshen.com>
Date: Fri, 28 Mar 2025 05:08:52 -0400
Subject: [PATCH] Add loading animation to general settings

---
 .../standalone/general-settings.svelte        | 29 +++++++++++++++++++
 apps/desktop/src/lib/stores/appConfig.ts      |  8 +++--
 packages/types/src/appConfig.ts               |  6 +++-
 pnpm-lock.yaml                                | 18 ++++++++++--
 4 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/apps/desktop/src/lib/components/standalone/general-settings.svelte b/apps/desktop/src/lib/components/standalone/general-settings.svelte
index 52ebc46..0a8549d 100644
--- a/apps/desktop/src/lib/components/standalone/general-settings.svelte
+++ b/apps/desktop/src/lib/components/standalone/general-settings.svelte
@@ -11,6 +11,7 @@
 	} 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"
@@ -19,12 +20,15 @@
 		value: lang,
 		label: LanguageMap[lang] ?? 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..69c073b 100644
--- a/apps/desktop/src/lib/stores/appConfig.ts
+++ b/apps/desktop/src/lib/stores/appConfig.ts
@@ -1,7 +1,7 @@
 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"
@@ -29,7 +29,8 @@ export const defaultAppConfig: AppConfigState = {
 	joinBetaProgram: false,
 	onBoarded: false,
 	developerMode: false,
-	appSearchPaths: []
+	appSearchPaths: [],
+	loadingAnimation: "spinning-circle"
 }
 
 export const appConfigLoaded = writable(false)
@@ -99,6 +100,9 @@ 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 {
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..02c158f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1391,7 +1391,7 @@ importers:
         specifier: ^2.1.1
         version: 2.1.1
       valibot:
-        specifier: ^1.0.0
+        specifier: ^1.0.0-beta.10
         version: 1.0.0(typescript@5.6.3)
     devDependencies:
       '@rollup/plugin-typescript':
@@ -1457,8 +1457,8 @@ importers:
         specifier: ^5.3.3
         version: 5.6.3
       valibot:
-        specifier: 1.0.0
-        version: 1.0.0(typescript@5.6.3)
+        specifier: 1.0.0-beta.9
+        version: 1.0.0-beta.9(typescript@5.6.3)
 
 packages:
 
@@ -11934,6 +11934,14 @@ packages:
       typescript:
         optional: true
 
+  valibot@1.0.0-beta.9:
+    resolution: {integrity: sha512-yEX8gMAZ2R1yI2uwOO4NCtVnJQx36zn3vD0omzzj9FhcoblvPukENIiRZXKZwCnqSeV80bMm8wNiGhQ0S8fiww==}
+    peerDependencies:
+      typescript: '>=5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   validate-npm-package-name@5.0.1:
     resolution: {integrity: sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -25757,6 +25765,10 @@ snapshots:
     optionalDependencies:
       typescript: 5.7.3
 
+  valibot@1.0.0-beta.9(typescript@5.6.3):
+    optionalDependencies:
+      typescript: 5.6.3
+
   validate-npm-package-name@5.0.1: {}
 
   validator@13.12.0: