From c8300e36a5ad8abdbf6d9288b540fcac5d5186d1 Mon Sep 17 00:00:00 2001
From: crthpl <theo@reinsberg.info>
Date: Sun, 8 Mar 2026 13:15:45 -0400
Subject: [PATCH 1/2] Add progress bar to performance page during trade history
 loading

---
 frontend/src/routes/performance/+page.svelte | 22 +++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/frontend/src/routes/performance/+page.svelte b/frontend/src/routes/performance/+page.svelte
index e511a66f..7d34b6da 100644
--- a/frontend/src/routes/performance/+page.svelte
+++ b/frontend/src/routes/performance/+page.svelte
@@ -358,12 +358,24 @@
 </script>
 
 <div class="w-full pt-8">
-	<div class="mb-6 flex items-center justify-between">
-		<h1 class="text-xl font-bold">Performance</h1>
+	<div class="mb-6">
+		<div class="flex items-center justify-between">
+			<h1 class="text-xl font-bold">Performance</h1>
+			{#if isLoading}
+				<span class="text-sm text-muted-foreground">
+					Loading trade history: {loadingProgress.loaded}/{loadingProgress.total} markets...
+				</span>
+			{/if}
+		</div>
 		{#if isLoading}
-			<span class="text-sm text-muted-foreground">
-				Loading trade history: {loadingProgress.loaded}/{loadingProgress.total} markets...
-			</span>
+			<div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-muted">
+				<div
+					class="h-full rounded-full bg-primary transition-all duration-300"
+					style="width: {loadingProgress.total > 0
+						? (loadingProgress.loaded / loadingProgress.total) * 100
+						: 0}%"
+				></div>
+			</div>
 		{/if}
 	</div>
 

From 65026272ebe66790843346bed52194ef320ac1d9 Mon Sep 17 00:00:00 2001
From: crthpl <theo@reinsberg.info>
Date: Sun, 8 Mar 2026 13:32:36 -0400
Subject: [PATCH 2/2] Fix reactivity of loading progress bar on performance
 page

requestedMarkets was a plain Set, so $derived never tracked changes
to it. Made it $state and used untrack() in the $effect to avoid
circular dependencies.
---
 frontend/src/routes/performance/+page.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/routes/performance/+page.svelte b/frontend/src/routes/performance/+page.svelte
index 7d34b6da..86232131 100644
--- a/frontend/src/routes/performance/+page.svelte
+++ b/frontend/src/routes/performance/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import { accountName, sendClientMessage, serverState } from '$lib/api.svelte';
 	import PnlChart from '$lib/components/pnlChart.svelte';
 	import PriceChart from '$lib/components/priceChart.svelte';
@@ -130,7 +131,7 @@
 	});
 
 	// --- Trade history loading ---
-	let requestedMarkets = new Set<number>();
+	let requestedMarkets = $state(new Set<number>());
 	let prevAccountId: number | undefined = undefined;
 
 	// Request trade history for relevant markets
@@ -155,7 +156,7 @@
 
 		let delay = 0;
 		for (const marketId of needed) {
-			if (requestedMarkets.has(marketId)) continue;
+			if (untrack(() => requestedMarkets.has(marketId))) continue;
 			requestedMarkets.add(marketId);
 			setTimeout(() => {
 				sendClientMessage({ getFullTradeHistory: { marketId } });