Show the app icon while a deck is generating
The staged loading screen still rendered the pre-redesign logo — a white snowflake in a blue rounded square — while every other surface (header, sidebar, empty states, key gate, install sheet) uses the app icon. - LoadingState now shows /icons/icon-512.png at size-28 with the same gentle wobble animation; 512px keeps the 112px render crisp on hi-DPI phones. - Service worker: freezmo-v17. Verified: loading-logo suite 12/12 (dark + light: icon visible at 112x112, no old snowflake svg left, heading/stages/cancel intact), regression 74/74, mobile 51/51, i18n 27/27. Lint + build clean.
This commit is contained in:
parent
a8c752828e
commit
829a71f4ff
2 changed files with 10 additions and 3 deletions
|
|
@ -772,13 +772,20 @@ function LoadingState({ progress, onCancel }: { progress: GenerateProgress; onCa
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative flex min-h-[70dvh] flex-col items-center justify-center gap-6 text-center">
|
<div className="relative flex min-h-[70dvh] flex-col items-center justify-center gap-6 text-center">
|
||||||
|
{/* The app icon, not the bare snowflake — same logo as the header,
|
||||||
|
sidebar and empty states. */}
|
||||||
<motion.div
|
<motion.div
|
||||||
aria-hidden
|
aria-hidden
|
||||||
animate={{ rotate: [0, 8, -8, 0], scale: [1, 1.08, 1] }}
|
animate={{ rotate: [0, 8, -8, 0], scale: [1, 1.08, 1] }}
|
||||||
transition={{ duration: 3.2, repeat: Infinity, ease: "easeInOut" }}
|
transition={{ duration: 3.2, repeat: Infinity, ease: "easeInOut" }}
|
||||||
className="relative grid size-28 place-items-center rounded-[1.75rem] bg-accent-600 text-white shadow-lift"
|
className="relative size-28"
|
||||||
>
|
>
|
||||||
<SnowflakeIcon className="size-16" />
|
{/* eslint-disable-next-line @next/next/no-img-element -- static app icon, no optimisation needed */}
|
||||||
|
<img
|
||||||
|
src="/icons/icon-512.png"
|
||||||
|
alt=""
|
||||||
|
className="size-28 rounded-[1.75rem] shadow-lift"
|
||||||
|
/>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<div className="relative w-full max-w-md space-y-3">
|
<div className="relative w-full max-w-md space-y-3">
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
*
|
*
|
||||||
* Bumping CACHE_VERSION is how a new deploy invalidates old assets.
|
* Bumping CACHE_VERSION is how a new deploy invalidates old assets.
|
||||||
*/
|
*/
|
||||||
const CACHE_VERSION = "freezmo-v16";
|
const CACHE_VERSION = "freezmo-v17";
|
||||||
const SHELL_CACHE = `${CACHE_VERSION}-shell`;
|
const SHELL_CACHE = `${CACHE_VERSION}-shell`;
|
||||||
const ASSET_CACHE = `${CACHE_VERSION}-assets`;
|
const ASSET_CACHE = `${CACHE_VERSION}-assets`;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue