diff --git a/modules/spicetify-splash/README.md b/modules/spicetify-splash/README.md index 9475b24..9e1b6bd 100644 --- a/modules/spicetify-splash/README.md +++ b/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 diff --git a/modules/spicetify-splash/metadata.json b/modules/spicetify-splash/metadata.json index ae79ef7..5843efe 100644 --- a/modules/spicetify-splash/metadata.json +++ b/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", diff --git a/modules/spicetify-splash/splash.test.mts b/modules/spicetify-splash/splash.test.mts index b740fad..abbae4a 100644 --- a/modules/spicetify-splash/splash.test.mts +++ b/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); }); diff --git a/modules/spicetify-splash/splash.ts b/modules/spicetify-splash/splash.ts index 4188f31..27f9e5e 100644 --- a/modules/spicetify-splash/splash.ts +++ b/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