perf(sprites): serve grid-sized thumbnails from an immutable URL space

Every grid cell downloaded the full detail sprite. Generate a smaller
/sprites-grid/v1/ set at build time and let the grid ask for those first,
falling back through the existing detail URLs when a thumbnail is missing so
detail resolution is unchanged. The new prefix is versioned, so it can be cached
forever, and the service worker recognises it alongside the other sprite roots.

The placeholder is now an empty box rather than a spinner: a thousand spinners
cost layout work and announced nothing useful.
This commit is contained in:
Josh Creek
2026-09-15 17:46:49 +01:00
parent 26b9e3b8c1
commit b2b750115f
10 changed files with 128 additions and 20 deletions
+8 -7
View File
@@ -8,12 +8,12 @@
"dev-generate-suppress-w": "GENERATE_SW=true SUPPRESS_WARNING=true npx tailwindcss -i ./static/input.css -o ./static/output.css && vite dev",
"sprites:build": "node scripts/optimize-sprites.mjs",
"sprites:manifest": "node scripts/sprite-manifest.mjs",
"build-generate-sw": "npm run tailwind && GENERATE_SW=true vite build",
"build-generate-sw-node": "npm run tailwind && NODE_ADAPTER=true GENERATE_SW=true vite build",
"build": "npm run tailwind && vite build",
"build-inject-manifest": "npm run tailwind && vite build",
"build-inject-manifest-node": "npm run tailwind && NODE_ADAPTER=true vite build",
"build-self-destroying": "npm run tailwind && SELF_DESTROYING_SW=true vite build",
"build-generate-sw": "npm run sprites:grid && npm run tailwind && GENERATE_SW=true vite build",
"build-generate-sw-node": "npm run sprites:grid && npm run tailwind && NODE_ADAPTER=true GENERATE_SW=true vite build",
"build": "npm run sprites:grid && npm run tailwind && vite build",
"build-inject-manifest": "npm run sprites:grid && npm run tailwind && vite build",
"build-inject-manifest-node": "npm run sprites:grid && npm run tailwind && NODE_ADAPTER=true vite build",
"build-self-destroying": "npm run sprites:grid && npm run tailwind && SELF_DESTROYING_SW=true vite build",
"preview": "vite preview --port=4173",
"preview-node": "PORT=4173 node build",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -44,7 +44,8 @@
"supabase:studio": "supabase studio",
"migrate:convert-tsv": "node scripts/convert-tsv-to-sql.js",
"dev:local": "./scripts/dev-local.sh && npm run dev",
"dev:supabase": "supabase start && npm run dev"
"dev:supabase": "supabase start && npm run dev",
"sprites:grid": "node scripts/grid-thumbnails.mjs"
},
"devDependencies": {
"@lhci/cli": "^0.15.1",