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
@@ -141,9 +141,10 @@ const gridStyles = css`
display: flex;
flex-direction: column;
cursor: pointer;
border-radius: 8px;
padding: 5px;
/* transitions removed — software rendering repaints per frame */
/* border-radius removed — forces anti-aliased path clipping on
every paint of every visible card; cover image retains its own
4px radius via .cover-container */
box-sizing: border-box;
width: var(--card-width, 176px);
}
@@ -169,7 +170,7 @@ const gridStyles = css`
border-radius: 4px;
overflow: hidden;
background-color: var(--yj-bg-surface, #282828);
transition: scale 0.15s ease;
/* transition removed — software rendering repaints per frame */
}
.album-card.selected .cover-container {
@@ -202,7 +203,7 @@ const gridStyles = css`
margin-top: 4px;
min-width: 0;
text-align: center;
transition: scale 0.15s ease;
/* transition removed — software rendering repaints per frame */
}
.album-card.selected .album-info {