stack/docs/scratchpads/ms15-fe-006-mosaic-logo-spinner.md

MS15-FE-006: MosaicLogo and MosaicSpinner Components

Task

Create Mosaic logo icon component and spinner wrapper for use as the site-wide loading indicator.

Files to Create

1. apps/web/src/components/ui/MosaicLogo.tsx — 5-element logo icon
2. apps/web/src/components/ui/MosaicSpinner.tsx — spinner wrapper

Files to Modify

1. apps/web/src/app/(authenticated)/layout.tsx — replace loading spinner (isLoading block only)

Design

• 4 corner squares: blue (TL), purple (TR), teal (BR), amber (BL)
• 1 center circle: pink
• CSS vars: --ms-blue-500, --ms-purple-500, --ms-teal-500, --ms-amber-500, --ms-pink-500
• Animation: linear 360deg rotation

Props

MosaicLogo

• size?: number (default 36)
• spinning?: boolean (default false)
• spinDuration?: number (default 20) seconds
• className?: string

MosaicSpinner

• Wraps MosaicLogo with spinning=true
• label?: string — optional text label below
• fullPage?: boolean — center on screen

Status

• Scratchpad created
• MosaicLogo.tsx created
• MosaicSpinner.tsx created
• layout.tsx updated
• Lint clean
• Committed and pushed