perf(spicetify-splash): leave sooner and snapshot the theme when idle

modules/spicetify-splash/README.md

@@ -33,7 +33,7 @@ Set these on `.spicetify-splash`. Setting them on `:root` also works, unless you
 | `--splash-caption`         | `""`                             | Caption text, as a CSS string                       |
 | `--splash-font`            | inherited                        | Caption font                                        |
 | `--splash-motion-duration` | `3.2s`                           | Flame sway period; the glow drift scales from it    |
-| `--splash-exit-duration`   | `450ms`                          | Fade-out length                                     |
+| `--splash-exit-duration`   | `250ms`                          | Fade-out length                                     |
 
 ### Structure
 

modules/spicetify-splash/metadata.json

@@ -1,7 +1,7 @@
 {
 	"name": "spicetify-splash",
 	"kind": "extension",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"authors": ["spicetify"],
 	"description": "A splash screen while Spotify, your modules, and your theme start up.",
 	"preview": "https://raw.githubusercontent.com/spicetify/modules/main/previews/spicetify-splash.png",

modules/spicetify-splash/splash.test.mts

@@ -56,9 +56,11 @@ test("keeps the splash until the interface and module loading are both ready", (
 	t.mock.timers.tick(500);
 	assert.equal(dialog()!.dataset.stage, "loading");
 	modulesLoaded = true;
-	t.mock.timers.tick(100);
+	t.mock.timers.tick(25);
 	assert.equal(dialog()!.dataset.stage, "leaving");
-	t.mock.timers.tick(450);
+	t.mock.timers.tick(249);
+	assert.ok(dialog());
+	t.mock.timers.tick(1);
 	assert.equal(dialog(), null);
 	assert.equal(document.querySelector("style[data-spicetify-splash]"), null);
 });

modules/spicetify-splash/splash.ts

@@ -8,7 +8,7 @@ import { getSplashImage } from "./image.ts";
 import { CSS } from "./style.ts";
 import { getCustomCss, getThemeSnapshot, saveThemeSnapshot } from "./theme.ts";
 
-const DEFAULT_EXIT = 450;
+const DEFAULT_EXIT = 250;
 
 export interface SplashOptions {
 	/** Show the splash on demand: it stays until clicked or Escape, and never records theme styles. */
@@ -86,7 +86,7 @@ export function showSplash(options: SplashOptions = {}) {
 		custom.remove();
 		if (recordTheme) {
 			recordTheme = false;
-			saveThemeSnapshot(CSS, customCss);
+			whenIdle(() => saveThemeSnapshot(CSS, customCss));
 		}
 	}
 
@@ -121,12 +121,19 @@ export function showSplash(options: SplashOptions = {}) {
 				recordTheme = true;
 				finish();
 			};
-			poll = setInterval(check, 100);
+			poll = setInterval(check, 25);
 			check();
 		},
 	};
 }
 
+// Reading computed styles right after the splash leaves forces a full style
+// recalculation while the client is still settling.
+function whenIdle(fn: () => void) {
+	if ("requestIdleCallback" in window) window.requestIdleCallback(fn, { timeout: 5000 });
+	else setTimeout(fn, 0);
+}
+
 // Theme sheets are adopted, and adopted sheets cascade after every <style>,
 // so custom CSS goes in an adopted sheet kept after them.
 function attachCustomCss(css: string) {

modules/spicetify-splash/style.ts

@@ -17,7 +17,7 @@ export const CSS = `
 	--_logo-size: var(--splash-logo-size, 96px);
 	--_image-size: var(--splash-image-size, 160px);
 	--_motion: var(--splash-motion-duration, 3.2s);
-	--_exit: var(--splash-exit-duration, 450ms);
+	--_exit: var(--splash-exit-duration, 250ms);
 	position: fixed !important;
 	inset: 0 !important;
 	width: 100vw !important;