Skip to content

design: Scriptty-branded loading spinner + PDF-export progress indicator #133

@stultus

Description

@stultus

What's there now: Long operations (PDF export, file open of a large series) currently rely on the browser's default cursor or a generic disabled state — ExportModal.svelte shows a .spinner-on-primary element with no bespoke art, and there's no global loader pattern.

Why it matters: PDF export of a long screenplay can take 1–3 seconds (Typst compile). That's the only "wait" surface in the app — and it's currently the most generic. A bespoke spinner is a 1-off design moment that punches above its weight.

Suggested deliverable:

  1. Spinner mark — small (16–20px) loading indicator in the brand mark style. Could be the ഋ rotating, a stylized film-reel turning, or a typewriter carriage moving.
  2. (Optional) progress wrapper — animated wrapper around primary buttons during async work (Save, Export). A subtle progress sweep across the button surface.
  3. (Optional) update-toast micro-animationUpdateToast.svelte currently slides in plain. A 1–2 frame motion accent (the new-version glyph appearing) would make it feel less like an OS banner.

Code touchpoints: src/lib/components/{ExportModal,UpdateToast}.svelte; future src/lib/components/Spinner.svelte.

Metadata

Metadata

Assignees

No one assigned

    Labels

    design-neededNeeds designer input or bespoke artworkenhancementNew feature or requestui-enhancementVisual / design asset enhancement (icons, illustrations, brand)

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions