perf: inline SVGs, memoize grid slices, batch store notifications

- Replace wa-icon shadow DOM with inline SVG in queue-panel (xmark)
  and album-dropdown (fav icons) to eliminate per-item shadow roots
- Memoize getBeforeEntries/getAfterEntries in cover-grid to prevent
  .slice() creating new array refs that trigger virtualizer relayout
- Remove transition: scale and border-radius from album cards to
  avoid per-frame repaints and anti-aliased path clipping
- Add queueMicrotask batching to player-store and favorites-store
  notify() to coalesce rapid-fire updates into single renders
This commit is contained in:
2026-03-15 09:29:40 -04:00
parent 54df917ffd
commit a4eac394ce
6 changed files with 75 additions and 25 deletions
+9 -1
View File
@@ -34,6 +34,7 @@ class FavoritesStore {
private pinDefault = true;
private favoritedPaths = new Set<string>();
private subscribers = new Set<Subscriber>();
private notifyScheduled = false;
private loading = false;
constructor() {
@@ -232,7 +233,14 @@ class FavoritesStore {
}
private notify(): void {
this.subscribers.forEach((cb) => cb());
if (this.notifyScheduled) return;
this.notifyScheduled = true;
queueMicrotask(() => {
this.notifyScheduled = false;
for (const cb of this.subscribers) {
cb();
}
});
}
// ===============================================================
+9 -1
View File
@@ -41,6 +41,7 @@ class PlayerStore {
};
private subscribers = new Set<Subscriber>();
private notifyScheduled = false;
constructor() {
this.initializeEventListeners();
@@ -115,7 +116,14 @@ class PlayerStore {
}
private notify(): void {
this.subscribers.forEach((callback) => callback());
if (this.notifyScheduled) return;
this.notifyScheduled = true;
queueMicrotask(() => {
this.notifyScheduled = false;
for (const sub of this.subscribers) {
sub();
}
});
}
}