Defer shader perf detection and reduce key-based rendering glitches

[ryokun6]

What

• Avoids running GPU/WebGL capability detection during module import / first paint.
• Stabilizes a couple list keys that could cause React to reuse the wrong element when lists change.
• Reduces Karaoke lyric overlay re-renders by decoupling high-frequency elapsedTime from the provider context.

Why

• checkShaderPerformance() creates a WebGL renderer; doing that at import time can jank first render and can be problematic in non-browser contexts.
• Index keys can manifest as subtle rendering bugs (wrong item reused) when arrays can reorder or be edited.
• React Scan showed Karaoke re-rendering large UI surfaces during playback; the provider context previously changed every tick due to elapsedTime.

Notes

• Existing users keep their persisted shaderEffectEnabled setting.
• New users get a best-effort shader auto-enable check scheduled via requestIdleCallback (or timeout fallback).
• Soundboard: key now uses board.id + slot index (slot objects have no id).

  

[ryos-deploy]

The preview deployment for ryos-dev is ready. 🟢

Open Preview | Open Build Logs | Open Application Logs

Last updated at: 2026-04-05 13:16:17 CET