add loader component with loading states to transactions and monero page

- Replace 5133props with runes-compatible () in loader.svelte
- Add SVGAttributes types to loader.svelte
- Add Loader spinner to EVM Transactions card while w.loading
- Add Loader spinners to Monero Start/Refresh buttons and Transactions card
- Remove redundant Monero top bar

apps/desktop/src/lib/components/EvmDashboard.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { electrobun, type TxEntry } from '$lib/electrobun.js'
-	import { wallet, type NetworkId } from '$lib/states/wallet.svelte.js'
+	import {
+		wallet,
+		type NetworkId,
+	} from '$lib/states/wallet.svelte.js'
 	import { Button } from '$lib/components/ui/button/index.js'
 	import { Textarea } from '$lib/components/ui/textarea/index.js'
 	import { navigate } from 'sv-router/generated'
@@ -18,6 +21,7 @@
 	import Fingerprint from '@lucide/svelte/icons/fingerprint'
 	import * as Dialog from '$lib/components/ui/dialog/index.js'
 	import QRCode from 'qrcode'
+	import Loader from './loader.svelte'
 
 	let { networkId }: { networkId: NetworkId } = $props()
 
@@ -83,13 +87,17 @@
 </script>
 
 {#if !w.ready}
-	<div class="mx-auto mt-16 max-w-md text-center text-muted-foreground text-sm">Loading...</div>
+	<div
+		class="mx-auto mt-16 max-w-md text-center text-muted-foreground text-sm">
+		Loading...
+	</div>
 {:else if !w.vaultExists}
 	<Card>
 		<CardHeader>
 			<CardTitle>Import Wallet</CardTitle>
 			<CardDescription>
-					Enter your seed phrase to save it securely in your system keychain
+				Enter your seed phrase to save it securely in your system
+				keychain
 			</CardDescription>
 		</CardHeader>
 		<CardContent>
@@ -103,7 +111,8 @@
 					class="flex h-8 w-full rounded-md border border-input bg-transparent px-2 py-1 font-mono text-xs"
 					bind:value={inputPassword} />
 				<Button
-						onclick={() => w.saveVault(inputSeed, inputPassword || undefined)}
+					onclick={() =>
+						w.saveVault(inputSeed, inputPassword || undefined)}
 					disabled={w.loading || !inputSeed.trim()}>
 					{w.loading ? 'Saving...' : 'Save to Keychain'}
 				</Button>
@@ -117,7 +126,9 @@
 	<Card>
 		<CardHeader>
 			<CardTitle>Wallet Locked</CardTitle>
-				<CardDescription>Your seed is stored in the system keychain</CardDescription>
+			<CardDescription>
+				Your seed is stored in the system keychain
+			</CardDescription>
 		</CardHeader>
 		<CardContent>
 			<div class="flex flex-col gap-3">
@@ -138,7 +149,9 @@
 							bind:value={inputUnlockPassword} />
 						<Button
 							onclick={async () => {
-									const ok = await w.unlockWithPassword(inputUnlockPassword)
+								const ok = await w.unlockWithPassword(
+									inputUnlockPassword,
+								)
 								if (!ok) w.error = 'Wrong password'
 								inputUnlockPassword = ''
 							}}
@@ -174,9 +187,7 @@
 				<div class="flex items-center justify-between">
 					<div>
 						<CardTitle>Wallet</CardTitle>
-							<CardDescription>
-								Your wallet is unlocked
-							</CardDescription>
+						<CardDescription>Your wallet is unlocked</CardDescription>
 					</div>
 				</div>
 			</CardHeader>
@@ -185,7 +196,9 @@
 					<div class="mb-4 space-y-1">
 						<p class="font-medium text-xs">Address</p>
 						<div class="flex items-start gap-2">
-								<p class="font-mono text-xs break-all flex-1">{w.address}</p>
+							<p class="font-mono text-xs break-all flex-1">
+								{w.address}
+							</p>
 							{#if qrDataUrl}
 								<Dialog.Root bind:open={qrDialogOpen}>
 									<Dialog.Trigger>
@@ -195,7 +208,8 @@
 										</button>
 									</Dialog.Trigger>
 									<Dialog.Content>
-											<div class="flex flex-col items-center gap-3 py-4">
+										<div
+											class="flex flex-col items-center gap-3 py-4">
 											<div class="relative">
 												<img
 													src={qrDataUrl}
@@ -206,7 +220,8 @@
 													alt=""
 													class="absolute left-1/2 top-1/2 size-7 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white p-0.5" />
 											</div>
-												<p class="font-mono text-xs break-all text-center max-w-64">
+											<p
+												class="font-mono text-xs break-all text-center max-w-64">
 												{w.address}
 											</p>
 										</div>
@@ -232,8 +247,7 @@
 					<div class="mb-4 space-y-1">
 						<p class="font-medium text-xs">Tokens</p>
 						{#each w.tokenBalances as t}
-								<p
-									class="flex items-center gap-1.5 font-mono text-sm">
+							<p class="flex items-center gap-1.5 font-mono text-sm">
 								<img
 									src={t.logo}
 									alt=""
@@ -256,12 +270,22 @@
 
 				<div class="flex gap-2">
 					<Button onclick={() => w.refresh()} disabled={w.loading}>
-							{w.loading ? 'Refreshing...' : 'Refresh'}
+						{#if w.loading}
+							<Loader />
+						{/if}
+						Refresh
 					</Button>
-						<Button variant="outline" onclick={() => navigate('/settings')}>
+					<Button
+						variant="outline"
+						onclick={() => navigate('/settings')}>
 						<SettingsIcon size={16} />
 					</Button>
-						<Button variant="outline" onclick={async () => { await w.logout(); navigate('/') }}>
+					<Button
+						variant="outline"
+						onclick={async () => {
+							await w.logout()
+							navigate('/')
+						}}>
 						Logout
 					</Button>
 				</div>
@@ -273,7 +297,11 @@
 				<CardTitle>Transactions</CardTitle>
 			</CardHeader>
 			<CardContent>
-					{#if !w.apiKey}
+				{#if w.loading}
+					<div class="flex justify-center py-4">
+						<Loader />
+					</div>
+				{:else if !w.apiKey}
 					<div class="flex gap-2 items-center">
 						<input
 							class="flex h-8 w-full rounded-md border border-input bg-transparent px-2 py-1 font-mono text-xs"
@@ -302,7 +330,11 @@
 										},
 									})}
 								class="flex w-full cursor-pointer items-start gap-2 rounded-md bg-muted px-3 py-2 text-xs text-left hover:bg-muted/80 transition-colors">
-									<div class="shrink-0 mt-0.5 {tx.from.toLowerCase() === w.address.toLowerCase() ? 'text-muted-foreground' : 'text-green-500'}">
+								<div
+									class="shrink-0 mt-0.5 {tx.from.toLowerCase() ===
+									w.address.toLowerCase()
+										? 'text-muted-foreground'
+										: 'text-green-500'}">
 									{#if tx.from.toLowerCase() === w.address.toLowerCase()}
 										<ArrowUp size={16} />
 									{:else}
@@ -327,10 +359,8 @@
 											{w.symbol}
 											<span class="mx-0.5">→</span>
 											<img
-													src={tx.pairedLogo || tokenIcon(
-														w.network,
-														tx.contractAddress,
-													)}
+												src={tx.pairedLogo ||
+													tokenIcon(w.network, tx.contractAddress)}
 												alt=""
 												class="size-3.5 rounded-full"
 												onerror={(e) =>
@@ -340,10 +370,8 @@
 											{tx.pairedSymbol}
 										{:else if tx.tokenSymbol}
 											<img
-													src={tx.logo || tokenIcon(
-														w.network,
-														tx.contractAddress,
-													)}
+												src={tx.logo ||
+													tokenIcon(w.network, tx.contractAddress)}
 												alt=""
 												class="size-3.5 rounded-full"
 												onerror={(e) =>

apps/desktop/src/lib/components/loader.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { SVGAttributes } from "svelte/elements";
+
+	let { ...rest }: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 24 24"
+	{...rest}>
+	<!-- Icon from SVG Spinners by Utkarsh Verma - https://github.com/n3r4zzurr0/svg-spinners/blob/main/LICENSE -->
+	<g>
+		<circle
+			cx="12"
+			cy="2.5"
+			r="1.5"
+			fill="currentColor"
+			opacity=".14" />
+		<circle
+			cx="16.75"
+			cy="3.77"
+			r="1.5"
+			fill="currentColor"
+			opacity=".29" />
+		<circle
+			cx="20.23"
+			cy="7.25"
+			r="1.5"
+			fill="currentColor"
+			opacity=".43" />
+		<circle
+			cx="21.5"
+			cy="12"
+			r="1.5"
+			fill="currentColor"
+			opacity=".57" />
+		<circle
+			cx="20.23"
+			cy="16.75"
+			r="1.5"
+			fill="currentColor"
+			opacity=".71" />
+		<circle
+			cx="16.75"
+			cy="20.23"
+			r="1.5"
+			fill="currentColor"
+			opacity=".86" />
+		<circle cx="12" cy="21.5" r="1.5" fill="currentColor" />
+		<animateTransform
+			attributeName="transform"
+			calcMode="discrete"
+			dur="0.75s"
+			repeatCount="indefinite"
+			type="rotate"
+			values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12" />
+	</g>
+</svg>

apps/desktop/src/routes/monero/index.svelte

@@ -13,6 +13,7 @@
 	import ArrowDown from '@lucide/svelte/icons/arrow-down'
 	import ArrowUp from '@lucide/svelte/icons/arrow-up'
 	import Fingerprint from '@lucide/svelte/icons/fingerprint'
+	import Loader from '$lib/components/loader.svelte'
 	import { navigate } from 'sv-router/generated'
 
 	const w = wallet
@@ -65,13 +66,6 @@
 				</CardContent>
 			</Card>
 		{:else if w.accountType === 'monero'}
-			<div class="flex items-center justify-center gap-1 flex-wrap" role="group">
-				<button
-					class="cursor-pointer rounded-md px-2.5 py-1 text-xs font-medium transition-colors bg-primary text-primary-foreground">
-					Monero
-				</button>
-			</div>
-
 			{#if w.moneroDownloading}
 			<Card>
 				<CardContent>
@@ -96,7 +90,10 @@
 				</CardHeader>
 				<CardContent>
 					<Button onclick={() => w.moneroStart()} disabled={w.loading}>
-						{w.loading ? 'Starting...' : 'Start'}
+						{#if w.loading}
+							<Loader />
+						{/if}
+						Start
 					</Button>
 				</CardContent>
 			</Card>
@@ -235,7 +232,10 @@
 
 					<div class="flex gap-2">
 						<Button onclick={() => { w.moneroRefresh(); w.moneroFetchAccounts(); }} disabled={w.loading}>
-							{w.loading ? 'Refreshing...' : 'Refresh'}
+							{#if w.loading}
+								<Loader />
+							{/if}
+							Refresh
 						</Button>
 						<Button variant="outline" onclick={() => w.moneroStop()}>
 							Stop
@@ -276,7 +276,11 @@
 					<CardTitle>Transactions</CardTitle>
 				</CardHeader>
 				<CardContent>
-					{#if w.moneroTxs.length === 0}
+					{#if w.loading}
+						<div class="flex justify-center py-4">
+							<Loader />
+						</div>
+					{:else if w.moneroTxs.length === 0}
 						<p class="text-muted-foreground text-xs">No transactions found</p>
 					{:else}
 						<div class="max-h-96 space-y-1 overflow-y-auto">