The project explores two approaches to handling user interactions that involve server communication:
- Optimistic UI: Assumes the action will succeed and updates the UI immediately, potentially reverting later if there's an error.
- Pending UI: Shows a visual cue (e.g., spinner) while waiting for the server response before updating the UI.
- Be optimistic! Assume the action will succeed.
- When a user clicks a button, for example, update the UI right away to reflect the expected outcome (e.g., show the post as liked or the task added to the list).
- In the background, send a request to the server to confirm the action.
- If successful, great! The UI already reflects the change.
- If there's an error (e.g., network issue), revert the UI change and inform the user.
optimistic-version.mov
- This is a more traditional approach.
- When a user performs an action, show a visual cue that something is happening (e.g., a spinner or dimmed button).
- This lets the user know the application is working on their request.
- Once the server responds, update the UI accordingly.
pending-version.mov
- Use optimistic UI for common actions that are likely to succeed to make the app feel faster.
- Use pending UI for actions that might fail or take longer, so users aren't confused by a sudden UI change.
Run the Vite dev server:
npm run dev