From 462b96f109c375e5f84153cdf564bc86a53fcd34 Mon Sep 17 00:00:00 2001
From: TZGyn <spectator_brethren761@slmails.com>
Date: Tue, 19 May 2026 03:32:45 +0800
Subject: [PATCH] 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
---
 .../src/lib/components/EvmDashboard.svelte    | 604 +++++++++---------
 apps/desktop/src/lib/components/loader.svelte |  60 ++
 apps/desktop/src/routes/monero/index.svelte   |  24 +-
 3 files changed, 390 insertions(+), 298 deletions(-)
 create mode 100644 apps/desktop/src/lib/components/loader.svelte

diff --git a/apps/desktop/src/lib/components/EvmDashboard.svelte b/apps/desktop/src/lib/components/EvmDashboard.svelte
index b17db67..c5ac14a 100644
--- a/apps/desktop/src/lib/components/EvmDashboard.svelte
+++ b/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,307 +87,331 @@
 </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
-				</CardDescription>
-			</CardHeader>
-			<CardContent>
-				<div class="flex flex-col gap-3">
-					<Textarea
-						placeholder="Enter your 12 or 24 word seed phrase"
-						bind:value={inputSeed} />
-					<input
-						type="password"
-						placeholder="Set a password (optional, used when Touch ID is unavailable)"
-						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)}
-						disabled={w.loading || !inputSeed.trim()}>
-						{w.loading ? 'Saving...' : 'Save to Keychain'}
-					</Button>
-				</div>
-				{#if w.error}
-					<p class="mt-3 text-red-500">{w.error}</p>
-				{/if}
-			</CardContent>
-		</Card>
-	{:else if w.isLocked}
-		<Card>
-			<CardHeader>
-				<CardTitle>Wallet Locked</CardTitle>
-				<CardDescription>Your seed is stored in the system keychain</CardDescription>
-			</CardHeader>
-			<CardContent>
-				<div class="flex flex-col gap-3">
-					{#if w.biometricAvailable}
-						<Button
-							onclick={() => w.unlockWithBiometrics()}
-							disabled={w.loading}>
-							<Fingerprint size={16} />
-							{w.loading ? 'Unlocking...' : 'Unlock with Touch ID'}
-						</Button>
-					{/if}
-					{#if w.passwordSet}
-						<div class="flex gap-2 items-end">
-							<input
-								type="password"
-								placeholder="Enter password"
-								class="flex h-8 w-full rounded-md border border-input bg-transparent px-2 py-1 font-mono text-xs"
-								bind:value={inputUnlockPassword} />
-							<Button
-								onclick={async () => {
-									const ok = await w.unlockWithPassword(inputUnlockPassword)
-									if (!ok) w.error = 'Wrong password'
-									inputUnlockPassword = ''
-								}}
-								disabled={w.loading || !inputUnlockPassword}
-								size="sm">
-								{w.loading ? '...' : 'Unlock'}
-							</Button>
-						</div>
-					{/if}
-				</div>
-				{#if w.error}
-					<p class="mt-3 text-red-500">{w.error}</p>
-				{/if}
-			</CardContent>
-		</Card>
-	{:else}
-		<div class="flex flex-col gap-4">
-			<div class="flex gap-1 justify-center" role="group">
-				{#each w.evmNetworks as net}
-					<button
-						class="cursor-pointer rounded-md px-2.5 py-1 text-xs font-medium transition-colors {w.network ===
-						net.id
-							? 'bg-primary text-primary-foreground'
-							: 'bg-muted text-muted-foreground hover:bg-muted/80'}"
-						onclick={() => navigate(navTarget(net.id))}>
-						{net.name}
-					</button>
-				{/each}
+	<Card>
+		<CardHeader>
+			<CardTitle>Import Wallet</CardTitle>
+			<CardDescription>
+				Enter your seed phrase to save it securely in your system
+				keychain
+			</CardDescription>
+		</CardHeader>
+		<CardContent>
+			<div class="flex flex-col gap-3">
+				<Textarea
+					placeholder="Enter your 12 or 24 word seed phrase"
+					bind:value={inputSeed} />
+				<input
+					type="password"
+					placeholder="Set a password (optional, used when Touch ID is unavailable)"
+					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)}
+					disabled={w.loading || !inputSeed.trim()}>
+					{w.loading ? 'Saving...' : 'Save to Keychain'}
+				</Button>
 			</div>
-
-			<Card>
-				<CardHeader>
-					<div class="flex items-center justify-between">
-						<div>
-							<CardTitle>Wallet</CardTitle>
-							<CardDescription>
-								Your wallet is unlocked
-							</CardDescription>
-						</div>
+			{#if w.error}
+				<p class="mt-3 text-red-500">{w.error}</p>
+			{/if}
+		</CardContent>
+	</Card>
+{:else if w.isLocked}
+	<Card>
+		<CardHeader>
+			<CardTitle>Wallet Locked</CardTitle>
+			<CardDescription>
+				Your seed is stored in the system keychain
+			</CardDescription>
+		</CardHeader>
+		<CardContent>
+			<div class="flex flex-col gap-3">
+				{#if w.biometricAvailable}
+					<Button
+						onclick={() => w.unlockWithBiometrics()}
+						disabled={w.loading}>
+						<Fingerprint size={16} />
+						{w.loading ? 'Unlocking...' : 'Unlock with Touch ID'}
+					</Button>
+				{/if}
+				{#if w.passwordSet}
+					<div class="flex gap-2 items-end">
+						<input
+							type="password"
+							placeholder="Enter password"
+							class="flex h-8 w-full rounded-md border border-input bg-transparent px-2 py-1 font-mono text-xs"
+							bind:value={inputUnlockPassword} />
+						<Button
+							onclick={async () => {
+								const ok = await w.unlockWithPassword(
+									inputUnlockPassword,
+								)
+								if (!ok) w.error = 'Wrong password'
+								inputUnlockPassword = ''
+							}}
+							disabled={w.loading || !inputUnlockPassword}
+							size="sm">
+							{w.loading ? '...' : 'Unlock'}
+						</Button>
 					</div>
-				</CardHeader>
-				<CardContent>
-					{#if w.address}
-						<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>
-								{#if qrDataUrl}
-									<Dialog.Root bind:open={qrDialogOpen}>
-										<Dialog.Trigger>
-											<button
-												class="shrink-0 cursor-pointer rounded-md border p-1.5 text-muted-foreground hover:bg-muted transition-colors">
-												<QrCodeIcon size={16} />
-											</button>
-										</Dialog.Trigger>
-										<Dialog.Content>
-											<div class="flex flex-col items-center gap-3 py-4">
-												<div class="relative">
-													<img
-														src={qrDataUrl}
-														alt="QR code"
-														class="size-52 rounded-md" />
-													<img
-														src={nativeIcon(w.network)}
-														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">
-													{w.address}
-												</p>
-											</div>
-										</Dialog.Content>
-									</Dialog.Root>
-								{/if}
-							</div>
-							<p class="mt-2 font-medium text-xs">
-								{w.symbol} Balance
+				{/if}
+			</div>
+			{#if w.error}
+				<p class="mt-3 text-red-500">{w.error}</p>
+			{/if}
+		</CardContent>
+	</Card>
+{:else}
+	<div class="flex flex-col gap-4">
+		<div class="flex gap-1 justify-center" role="group">
+			{#each w.evmNetworks as net}
+				<button
+					class="cursor-pointer rounded-md px-2.5 py-1 text-xs font-medium transition-colors {w.network ===
+					net.id
+						? 'bg-primary text-primary-foreground'
+						: 'bg-muted text-muted-foreground hover:bg-muted/80'}"
+					onclick={() => navigate(navTarget(net.id))}>
+					{net.name}
+				</button>
+			{/each}
+		</div>
+
+		<Card>
+			<CardHeader>
+				<div class="flex items-center justify-between">
+					<div>
+						<CardTitle>Wallet</CardTitle>
+						<CardDescription>Your wallet is unlocked</CardDescription>
+					</div>
+				</div>
+			</CardHeader>
+			<CardContent>
+				{#if w.address}
+					<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="flex items-center gap-1.5 font-mono text-lg">
+							{#if qrDataUrl}
+								<Dialog.Root bind:open={qrDialogOpen}>
+									<Dialog.Trigger>
+										<button
+											class="shrink-0 cursor-pointer rounded-md border p-1.5 text-muted-foreground hover:bg-muted transition-colors">
+											<QrCodeIcon size={16} />
+										</button>
+									</Dialog.Trigger>
+									<Dialog.Content>
+										<div
+											class="flex flex-col items-center gap-3 py-4">
+											<div class="relative">
+												<img
+													src={qrDataUrl}
+													alt="QR code"
+													class="size-52 rounded-md" />
+												<img
+													src={nativeIcon(w.network)}
+													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">
+												{w.address}
+											</p>
+										</div>
+									</Dialog.Content>
+								</Dialog.Root>
+							{/if}
+						</div>
+						<p class="mt-2 font-medium text-xs">
+							{w.symbol} Balance
+						</p>
+						<p class="flex items-center gap-1.5 font-mono text-lg">
+							<img
+								src={nativeIcon(w.network)}
+								alt=""
+								class="size-4 rounded-full"
+								onerror={(e) =>
+									((e.target as HTMLElement).style.display =
+										'none')} />
+							{w.balance}
+							{w.symbol}
+						</p>
+					</div>
+					<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">
 								<img
-									src={nativeIcon(w.network)}
+									src={t.logo}
 									alt=""
 									class="size-4 rounded-full"
 									onerror={(e) =>
 										((e.target as HTMLElement).style.display =
 											'none')} />
-								{w.balance}
-								{w.symbol}
+								{Number(t.balance) < 0.0001 && Number(t.balance) > 0
+									? '<0.0001'
+									: Number(t.balance).toFixed(4)}
+								{t.symbol}
 							</p>
-						</div>
-						<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">
-									<img
-										src={t.logo}
-										alt=""
-										class="size-4 rounded-full"
-										onerror={(e) =>
-											((e.target as HTMLElement).style.display =
-												'none')} />
-									{Number(t.balance) < 0.0001 && Number(t.balance) > 0
-										? '<0.0001'
-										: Number(t.balance).toFixed(4)}
-									{t.symbol}
-								</p>
-							{/each}
-						</div>
-					{/if}
+						{/each}
+					</div>
+				{/if}
 
-					{#if w.error}
-						<p class="mb-3 text-red-500">{w.error}</p>
-					{/if}
+				{#if w.error}
+					<p class="mb-3 text-red-500">{w.error}</p>
+				{/if}
 
-					<div class="flex gap-2">
-						<Button onclick={() => w.refresh()} disabled={w.loading}>
-							{w.loading ? 'Refreshing...' : 'Refresh'}
-						</Button>
-						<Button variant="outline" onclick={() => navigate('/settings')}>
-							<SettingsIcon size={16} />
-						</Button>
-						<Button variant="outline" onclick={async () => { await w.logout(); navigate('/') }}>
-							Logout
+				<div class="flex gap-2">
+					<Button onclick={() => w.refresh()} disabled={w.loading}>
+						{#if w.loading}
+							<Loader />
+						{/if}
+						Refresh
+					</Button>
+					<Button
+						variant="outline"
+						onclick={() => navigate('/settings')}>
+						<SettingsIcon size={16} />
+					</Button>
+					<Button
+						variant="outline"
+						onclick={async () => {
+							await w.logout()
+							navigate('/')
+						}}>
+						Logout
+					</Button>
+				</div>
+			</CardContent>
+		</Card>
+
+		<Card>
+			<CardHeader>
+				<CardTitle>Transactions</CardTitle>
+			</CardHeader>
+			<CardContent>
+				{#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"
+							placeholder="Alchemy API key"
+							bind:value={apiKeyInput} />
+						<Button
+							size="sm"
+							onclick={() => w.saveApiKey(apiKeyInput)}
+							disabled={!apiKeyInput.trim()}>
+							Save
 						</Button>
 					</div>
-				</CardContent>
-			</Card>
-
-			<Card>
-				<CardHeader>
-					<CardTitle>Transactions</CardTitle>
-				</CardHeader>
-				<CardContent>
-					{#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"
-								placeholder="Alchemy API key"
-								bind:value={apiKeyInput} />
-							<Button
-								size="sm"
-								onclick={() => w.saveApiKey(apiKeyInput)}
-								disabled={!apiKeyInput.trim()}>
-								Save
-							</Button>
-						</div>
-					{:else if w.transactions.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">
-							{#each w.transactions as tx}
-								<button
-									onclick={() =>
-										navigate('/tx/:chainid/:hash', {
-											params: {
-												chainid: w.chainid,
-												hash: tx.hash,
-											},
-										})}
-									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'}">
-										{#if tx.from.toLowerCase() === w.address.toLowerCase()}
-											<ArrowUp size={16} />
+				{:else if w.transactions.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">
+						{#each w.transactions as tx}
+							<button
+								onclick={() =>
+									navigate('/tx/:chainid/:hash', {
+										params: {
+											chainid: w.chainid,
+											hash: tx.hash,
+										},
+									})}
+								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'}">
+									{#if tx.from.toLowerCase() === w.address.toLowerCase()}
+										<ArrowUp size={16} />
+									{:else}
+										<ArrowDown size={16} />
+									{/if}
+								</div>
+								<div class="min-w-0 flex-1 space-y-0.5">
+									<p class="font-medium">
+										{txAction(tx, w.address)}
+									</p>
+									<p
+										class="flex items-center gap-1 text-muted-foreground font-mono">
+										{#if tx.pairedValue}
+											<img
+												src={nativeIcon(w.network)}
+												alt=""
+												class="size-3.5 rounded-full"
+												onerror={(e) =>
+													((e.target as HTMLElement).style.display =
+														'none')} />
+											{Number(tx.value).toFixed(4)}
+											{w.symbol}
+											<span class="mx-0.5">→</span>
+											<img
+												src={tx.pairedLogo ||
+													tokenIcon(w.network, tx.contractAddress)}
+												alt=""
+												class="size-3.5 rounded-full"
+												onerror={(e) =>
+													((e.target as HTMLElement).style.display =
+														'none')} />
+											{Number(tx.pairedValue).toFixed(4)}
+											{tx.pairedSymbol}
+										{:else if tx.tokenSymbol}
+											<img
+												src={tx.logo ||
+													tokenIcon(w.network, tx.contractAddress)}
+												alt=""
+												class="size-3.5 rounded-full"
+												onerror={(e) =>
+													((e.target as HTMLElement).style.display =
+														'none')} />
+											{Number(tx.value).toFixed(4)}
+											{tx.tokenSymbol}
 										{:else}
-											<ArrowDown size={16} />
+											<img
+												src={nativeIcon(w.network)}
+												alt=""
+												class="size-3.5 rounded-full"
+												onerror={(e) =>
+													((e.target as HTMLElement).style.display =
+														'none')} />
+											{Number(tx.value).toFixed(4)}
+											{w.symbol}
 										{/if}
-									</div>
-									<div class="min-w-0 flex-1 space-y-0.5">
-										<p class="font-medium">
-											{txAction(tx, w.address)}
-										</p>
-										<p
-											class="flex items-center gap-1 text-muted-foreground font-mono">
-											{#if tx.pairedValue}
-												<img
-													src={nativeIcon(w.network)}
-													alt=""
-													class="size-3.5 rounded-full"
-													onerror={(e) =>
-														((e.target as HTMLElement).style.display =
-															'none')} />
-												{Number(tx.value).toFixed(4)}
-												{w.symbol}
-												<span class="mx-0.5">→</span>
-												<img
-													src={tx.pairedLogo || tokenIcon(
-														w.network,
-														tx.contractAddress,
-													)}
-													alt=""
-													class="size-3.5 rounded-full"
-													onerror={(e) =>
-														((e.target as HTMLElement).style.display =
-															'none')} />
-												{Number(tx.pairedValue).toFixed(4)}
-												{tx.pairedSymbol}
-											{:else if tx.tokenSymbol}
-												<img
-													src={tx.logo || tokenIcon(
-														w.network,
-														tx.contractAddress,
-													)}
-													alt=""
-													class="size-3.5 rounded-full"
-													onerror={(e) =>
-														((e.target as HTMLElement).style.display =
-															'none')} />
-												{Number(tx.value).toFixed(4)}
-												{tx.tokenSymbol}
-											{:else}
-												<img
-													src={nativeIcon(w.network)}
-													alt=""
-													class="size-3.5 rounded-full"
-													onerror={(e) =>
-														((e.target as HTMLElement).style.display =
-															'none')} />
-												{Number(tx.value).toFixed(4)}
-												{w.symbol}
-											{/if}
-										</p>
-										<p class="text-muted-foreground">
-											{new Date(
-												Number(tx.timeStamp) * 1000,
-											).toLocaleDateString('en-US', {
-												year: 'numeric',
-												month: 'short',
-												day: 'numeric',
-												hour: '2-digit',
-												minute: '2-digit',
-											})}
-										</p>
-										<p
-											class="text-muted-foreground/50 truncate font-mono">
-											{tx.hash.slice(0, 10)}...
-										</p>
-									</div>
-								</button>
-							{/each}
-						</div>
-					{/if}
-				</CardContent>
-			</Card>
-		</div>
-	{/if}
+									</p>
+									<p class="text-muted-foreground">
+										{new Date(
+											Number(tx.timeStamp) * 1000,
+										).toLocaleDateString('en-US', {
+											year: 'numeric',
+											month: 'short',
+											day: 'numeric',
+											hour: '2-digit',
+											minute: '2-digit',
+										})}
+									</p>
+									<p
+										class="text-muted-foreground/50 truncate font-mono">
+										{tx.hash.slice(0, 10)}...
+									</p>
+								</div>
+							</button>
+						{/each}
+					</div>
+				{/if}
+			</CardContent>
+		</Card>
+	</div>
+{/if}
diff --git a/apps/desktop/src/lib/components/loader.svelte b/apps/desktop/src/lib/components/loader.svelte
new file mode 100644
index 0000000..a070329
--- /dev/null
+++ b/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>
diff --git a/apps/desktop/src/routes/monero/index.svelte b/apps/desktop/src/routes/monero/index.svelte
index 74cb4bb..c96633b 100644
--- a/apps/desktop/src/routes/monero/index.svelte
+++ b/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">