Add loading skeletons for UX

[RossCabrera]

Overview

Add loading skeleton components to display placeholder content while data
loads, providing better perceived performance and UX.

Skeleton Screens

Notes Grid Skeleton

• 4-6 skeleton cards matching grid layout
• Pulse animation
• Disappear when real data loads

Note Card Skeleton

• Title placeholder
• Description lines (3-4)
• Badge placeholder
• Realistic proportions

Sidebar Skeleton

• Category list skeleton
• 5-6 category items
• Add category button skeleton

Form Skeleton

• Input field skeletons
• Button skeleton
• Realistic layout

Implementation

• Use skeleton library (e.g., react-loading-skeleton)
• Pulse animation
• Gray placeholder color matching design
• Proper spacing and sizing

Acceptance Criteria

• Skeletons match real content layout
• Smooth animation
• Clear it's loading (not broken)
• Disappear when content loads
• All async operations have skeletons
• Works on all screen sizes
• Accessible (announces loading)

Related Issues

• Depends on: Build workspace sidebar with categories #22 , Build note grid/card view #23