valec3 Frontend Ui Feedback States
When to use this skill
- Implementing loading states
- Handling errors gracefully
- Showing empty states
- Providing user feedback
Workflow
- Identify all possible states
- Design for loading state
- Design for error state
- Design for empty state
- Design for success state
Instructions
State Pattern
type DataState<T> =
| { status: 'idle' }
| { status: 'loading' }
| { status: 'success'; data: T }
| { status: 'error'; error: Error };
function UserProfile() {
const [state, setState] = useState<DataState<User>>({ status: 'idle' });
if (state.status === 'loading') return <Skeleton />;
if (state.status === 'error') return <ErrorMessage error={state.error} />;
if (state.status === 'success') return <UserCard user={state.data} />;
return null;
}
Loading States
- Skeletons for content
- Spinners for actions
- Progress bars for uploads
Empty States
- Clear message
- Illustration
- Call-to-action
Resources
- Always handle all states
- Provide clear error messages
- Make loading states feel fast