Improve: add global loading screen (#237)

* refactor(desktop): move ext loading code in store from +page.ts to +page.svelte

try to solve blank screen on slow network

* Revert "refactor(desktop): move ext loading code in store from +page.ts to +page.svelte"

This reverts commit 4a0a695ce6.

* feat(desktop): add full-screen loading state and border beam animation

- Implement full-screen loading component with BorderBeam animation
- Add fullScreenLoading flag to appState store
- Update extension store pages to use full-screen loading
- Add border beam animation to Tailwind config
- Enhance page loading experience with visual feedback

* feat(desktop): add dance animation to loading screen and update imports

- Add Dance component to FullScreenLoading with subtle background effect
- Remove unused fade transition import from layout
- Update lz-string import in utils to use default import
- Clean up compress test imports

* feat(desktop): add back button to full-screen loading component

- Import ArrowLeftIcon and Constants from @kksh/ui
- Add back button with absolute positioning
- Remove "Go Home" text button
- Enhance loading screen with improved navigation

* refactor(desktop): update BorderBeam component to use Svelte 5 runes

packages/types/src/appState.ts

@@ -7,4 +7,5 @@ export interface AppState {
 	defaultAction: string | null
 	actionPanel?: ActionSchema.ActionPanel
 	lockHideOnBlur: boolean
+	fullScreenLoading: boolean
 }

packages/ui/src/components/layouts/center.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { cn } from "@kksh/ui/utils"
 	import { type Snippet } from "svelte"
+	import { fade } from "svelte/transition"
 
 	const {
 		children,
@@ -10,6 +11,6 @@
 	}: { children: Snippet; class?: string; [key: string]: any } = $props()
 </script>
 
-<div class={cn("flex items-center justify-center", className)} {...restProps}>
+<div transition:fade class={cn("flex items-center justify-center", className)} {...restProps}>
 	{@render children?.()}
 </div>

packages/utils/__tests__/compress.test.ts

@@ -1,5 +1,4 @@
 import { expect, test } from "bun:test"
-import { compress, decompress } from "lz-string"
 import { compressString, decompressString } from "../src"
 
 test("decompressString", async () => {

packages/utils/src/serde.ts

@@ -1,4 +1,6 @@
-import { compressToBase64, decompressFromBase64 } from "lz-string"
+import lzString from "lz-string"
+
+const { compressToBase64, decompressFromBase64 } = lzString
 
 /**
  * This file contains the deserialization and compression functions I designed for the grid animation.