Loading States & Skeletons Checklist

1. Button Loading States

Button shows a spinner while the async action is in progress
Button is disabled while loading and cannot be clicked twice
Button text changes to reflect the action
Button returns to normal state after success or failure
Button width does not change when switching to loading state

Loading Button Labels

Action	Default Label	Loading Label
Create	Create Project	Creating...
Save	Save Changes	Saving...
Delete	Delete	Deleting...
Send	Send Invite	Sending...
Upload	Upload	Uploading...

2. Page & Section Loading

Full-page data fetch shows a skeleton immediately — never blank white page
Header, nav, and layout frame remain visible while content loads
Center spinner used only for very short operations under 500ms
Error state shown if page data fails to load
Retry button visible on page-level error state

3. Skeleton Screens

Skeleton matches the approximate layout of the real content
Skeleton uses shimmer or pulse — not static grey bars
Number of skeleton items matches expected data density
Skeleton disappears instantly when data arrives
No text content inside skeleton placeholders

4. Table Loading

Skeleton rows shown instead of a spinner in the table area
Column headers remain visible during loading
Sort and filter controls disabled during load
Re-fetch keeps existing rows visible with a subtle overlay or spinner

5. Inline & Component Loading

Dropdowns show spinner while options load
Search/autocomplete shows loading indicator while fetching
Images and avatars show placeholders until loaded
Uploads show progress bar or percentage
Widgets use individual loading states rather than hiding the whole page