⚡ Bolt: [performance improvement] Optimize array sort garbage collection overhead

.jules/bolt.md

@@ -9,3 +9,8 @@
 
 **Learning:** Using `on:keyup` for search input debouncing triggers unnecessary API calls on navigation keys (arrows, home, end) and misses changes from paste/cut. Svelte's reactive statements `$: debounce(value)` provide a robust, declarative way to trigger debouncing only when the value actually changes.
 **Action:** Replace `on:keyup` handlers with reactive statements for input debouncing to improve performance and correctness.
+
+## 2024-11-20 - Array Sort Garbage Collection Overhead
+
+**Learning:** Creating new arrays (e.g., `[a[sort], b[sort]]`) and using array methods like `.slice()` or `.reverse()` inside `Array.prototype.sort()` comparator functions creates severe garbage collection overhead, especially for large datasets. This is because the comparator is called $O(N \log N)$ times per sort.
+**Action:** Always use direct variable assignment and conditional swapping (e.g., `const temp = a; a = b; b = temp;`) inside sort comparators to prevent excessive object allocation.

src/routes/profile/DomainsTable.svelte

@@ -29,9 +29,17 @@
 
 	function handleSort() {
 		domains.sort((a, b) => {
-			const [aVal, bVal] = [a[sort], b[sort]][
-				sortDirection === 'ascending' ? 'slice' : 'reverse'
-			]();
+			let aVal = a[sort];
+			let bVal = b[sort];
+
+			// ⚡ Bolt: Prevent massive garbage collection overhead by avoiding array
+			// instantiation and .reverse() / .slice() inside the O(N log N) sort comparator.
+			if (sortDirection !== 'ascending') {
+				const temp = aVal;
+				aVal = bVal;
+				bVal = temp;
+			}
+
 			if (typeof aVal === 'string' && typeof bVal === 'string') return aVal.localeCompare(bVal);
 			return Number(aVal) - Number(bVal);
 		});