use braille loading instead + fake loading on billing

package.json

@@ -52,6 +52,7 @@
 		"mode-watcher": "^1.1.0",
 		"svelte-highlight": "^7.9.0",
 		"svelte-markdown": "^0.4.1",
-		"tailwind-merge": "^3.4.0"
+		"tailwind-merge": "^3.4.0",
+		"unicode-animations": "^1.0.3"
 	}
 }

pnpm-lock.yaml

@@ -41,6 +41,9 @@ importers:
       tailwind-merge:
         specifier: ^3.4.0
         version: 3.4.0
+      unicode-animations:
+        specifier: ^1.0.3
+        version: 1.0.3
     devDependencies:
       '@eslint/compat':
         specifier: ^2.0.2
@@ -2102,6 +2105,10 @@ packages:
   undici-types@7.16.0:
     resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
 
+  unicode-animations@1.0.3:
+    resolution: {integrity: sha512-+klB2oWwcYZjYWhwP4Pr8UZffWDFVx6jKeIahE6z0QYyM2dwDeDPyn5nevCYbyotxvtT9lh21cVURO1RX0+YMg==}
+    hasBin: true
+
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
@@ -4003,6 +4010,8 @@ snapshots:
 
   undici-types@7.16.0: {}
 
+  unicode-animations@1.0.3: {}
+
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1

src/lib/components/billing/BillingManagementModal.svelte

@@ -4,20 +4,24 @@
 	import { authState } from '$lib/state/auth.svelte';
 	import { Save } from '@lucide/svelte';
 	import Button from '../ui/button/button.svelte';
+	import Spinner from '../loading/Spinner.svelte';
 
 	let { open = $bindable(false) }: { open: boolean } = $props();
 
-	let billingOption = $derived(authState.user?.billingOption || 'personal');
 	const planColors = {
 		team: 'bg-purple-500/10 text-purple-600',
 		enterprise: 'bg-green-500/10 text-green-600'
 	};
-
+	let billingOption = $derived(authState.user?.billingOption || 'personal');
 	let selectedOrg = $derived(
 		authState.user?.orgs?.find((org) => org.preferred_username === billingOption)
 	);
+	let loading = $state.raw<boolean>(false);
 
-	function saveSettings() {
+	async function saveSettings() {
+		loading = true;
+		await new Promise((resolve) => setTimeout(resolve, 1_000));
+		loading = false;
 		if (billingOption === 'personal') {
 			localStorage.removeItem('hf-playground-billing-option');
 		} else {
@@ -111,12 +115,15 @@
 			<div class="mt-5 flex items-center justify-end gap-3">
 				<Button variant="outline" onclick={resetSettings}>Reset</Button>
 				<Button class="flex-1" onclick={saveSettings}>
-					<Save />
-					Save settings
+					{#if loading}
+						<Spinner className="text-lg" />
+						Saving...
+					{:else}
+						<Save />
+						Save settings
+					{/if}
 				</Button>
 			</div>
 		</Dialog.Description>
 	</Dialog.Content>
 </Dialog.Root>
-
-<!-- replace to select a billing option (personal or organization) -->

src/lib/components/chat/Assistant.svelte

@@ -132,10 +132,7 @@
 			</header>
 
 			{#if loading}
-				<div class="flex items-center justify-start gap-1">
-					<Spinner className="size-4!" />
-					<p class="text-sm text-muted-foreground/70">Reaching out...</p>
-				</div>
+				<Spinner className="text-sm text-muted-foreground/70">Reaching out...</Spinner>
 			{/if}
 			{#if message}
 				<div bind:this={containerRef}>

src/lib/components/flow/actions/PanelRightActions.svelte

@@ -18,7 +18,6 @@
 	import { billingModalState } from '$lib/state/billing-modal.svelte';
 	import defaultAvatar from '$lib/assets/default-avatar.svg';
 	import BillingManagementModal from '$lib/components/billing/BillingManagementModal.svelte';
-	import Spinner from '$lib/components/loading/Spinner.svelte';
 
 	let { canReset }: { canReset: boolean } = $props();
 

src/lib/components/loading/MainLoading.svelte

@@ -7,6 +7,6 @@
 	<img src={HuggingFaceLogo} alt="HF Logo" class="size-16" />
 	<p class="mt-1 flex items-center justify-center gap-2 text-base text-muted-foreground">
 		Loading playground...
-		<Spinner className="size-5" />
+		<Spinner name="braille" />
 	</p>
 </div>

src/lib/components/loading/Spinner.svelte

@@ -1,8 +1,29 @@
 <script lang="ts">
-	let { className }: { className?: string } = $props();
+	import type { Snippet } from 'svelte';
+	import spinners, { type BrailleSpinnerName } from 'unicode-animations';
+	let {
+		className,
+		children,
+		name = 'braille'
+	}: { className?: string; children?: Snippet; name?: BrailleSpinnerName } = $props();
+
+	let frame = $state.raw<number>(0);
+	const spinner = spinners[name];
+
+	$effect(() => {
+		const interval = setInterval(() => {
+			frame = (frame + 1) % spinner.frames.length;
+		}, spinner.interval);
+		return () => clearInterval(interval);
+	});
 </script>
 
-<span class="loader {className}"></span>
+<span class={className}>
+	{spinner.frames[frame]}
+	{@render children?.()}
+</span>
+
+<!-- <span class="loader {className}"></span>
 
 <style>
 	.loader {
@@ -23,4 +44,4 @@
 			transform: rotate(1turn);
 		}
 	}
-</style>
+</style> -->