# 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

- [x] Scratchpad created
- [ ] MosaicLogo.tsx created
- [ ] MosaicSpinner.tsx created
- [ ] layout.tsx updated
- [ ] Lint clean
- [ ] Committed and pushed