From 33c3e0a16aba87bc1143ff5f49851191f3c7b4c3 Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Mon, 18 May 2026 17:24:29 +0200
Subject: [PATCH] chore: more perf changes

---
 src/components/engine/scope/element.js        | 32 ++++++++++---------
 .../orchestrator/scoped-tracks/element.js     |  9 ++++--
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/components/engine/scope/element.js b/src/components/engine/scope/element.js
index f52ca32e..1f34d1e6 100644
--- a/src/components/engine/scope/element.js
+++ b/src/components/engine/scope/element.js
@@ -2,7 +2,7 @@ import {
   BroadcastableDiffuseElement,
   defineElement,
 } from "~/common/element.js";
-import { signal } from "~/common/signal.js";
+import { batch, signal } from "~/common/signal.js";
 
 ////////////////////////////////////////////
 // ELEMENT
@@ -69,20 +69,22 @@ class ScopeEngine extends BroadcastableDiffuseElement {
     const storagePrefix =
       `${this.constructor.prototype.constructor.NAME}/${this.group}`;
 
-    this.#groupBy.value = localStorage.getItem(`${storagePrefix}/groupBy`) ??
-      undefined;
-    this.#playlist.value =
-      localStorage.getItem(`${storagePrefix}/playlistId`) ?? undefined;
-    this.#searchTerm.value =
-      localStorage.getItem(`${storagePrefix}/searchTerm`) ?? undefined;
-    this.#sortBy.value = JSON.parse(
-      localStorage.getItem(`${storagePrefix}/sortBy`) ??
-        `["tags.artist", "tags.album", "tags.disc.no", "tags.track.no"]`,
-    );
-    this.#sortDirection.value =
-      /** @type {"desc" | "asc"} */ (localStorage.getItem(
-        `${storagePrefix}/sortDirection`,
-      ) ?? "asc");
+    batch(() => {
+      this.#groupBy.value = localStorage.getItem(`${storagePrefix}/groupBy`) ??
+        undefined;
+      this.#playlist.value =
+        localStorage.getItem(`${storagePrefix}/playlistId`) ?? undefined;
+      this.#searchTerm.value =
+        localStorage.getItem(`${storagePrefix}/searchTerm`) ?? undefined;
+      this.#sortBy.value = JSON.parse(
+        localStorage.getItem(`${storagePrefix}/sortBy`) ??
+          `["tags.artist", "tags.album", "tags.disc.no", "tags.track.no"]`,
+      );
+      this.#sortDirection.value =
+        /** @type {"desc" | "asc"} */ (localStorage.getItem(
+          `${storagePrefix}/sortDirection`,
+        ) ?? "asc");
+    });
 
     // Effects
     this.effect(() => {
diff --git a/src/components/orchestrator/scoped-tracks/element.js b/src/components/orchestrator/scoped-tracks/element.js
index 2b394b17..699e5f86 100644
--- a/src/components/orchestrator/scoped-tracks/element.js
+++ b/src/components/orchestrator/scoped-tracks/element.js
@@ -227,6 +227,8 @@ class ScopedTracksOrchestrator extends BroadcastableDiffuseElement {
     });
 
     // Watch `#tracksSearch` + Playlist + Sort
+    let x = 0;
+
     this.effect(async () => {
       const tracks = this.#tracksSearch.value;
       const playlistItems = this.#selectedPlaylistItems();
@@ -235,7 +237,10 @@ class ScopedTracksOrchestrator extends BroadcastableDiffuseElement {
       const sortDirection = this.#scope.value?.sortDirection();
       const groupBy = this.#scope.value?.groupBy();
 
+      const y = ++x;
+
       if ((await this.isLeader()) === false) return;
+      if (y !== x) return;
 
       let final = playlistItems?.length
         ? filterByPlaylist(tracks, playlistItems)
@@ -410,14 +415,12 @@ function groupKeyLabel(track, fieldPath) {
  * @param {any} bVal
  * @returns {number}
  */
-const collator = new Intl.Collator(undefined, { numeric: true });
-
 function compareValues(aVal, bVal) {
   if (aVal == null && bVal == null) return 0;
   if (aVal == null) return 1;
   if (bVal == null) return -1;
   return typeof aVal === "string" && typeof bVal === "string"
-    ? collator.compare(aVal, bVal)
+    ? aVal.localeCompare(bVal)
     : aVal < bVal
     ? -1
     : aVal > bVal
-- 
2.51.2