Components
Saving and commit feedback
Explain when course edits are being committed and keep persistence responsibilities in the owner workflow.
On this page
Purpose and usage
Explain when course edits are being committed and keep persistence responsibilities in the owner workflow.
Anatomy
| Part | Contract |
|---|---|
| Action | Save It! button |
| Busy | Saving... and disabled action |
| Timestamp | Saved relative time when lastSaved supplied |
Variants and configuration
| Input or variant | Behavior |
|---|---|
| onClick | Promise-returning save callback |
| isSaving | External busy state combined with localSaving |
| lastSaved | Date or null; refreshed every 30 seconds |
State coverage
| State | Implemented behavior |
|---|---|
| Ready | Save It! |
| Saving | Disabled with Saving... label |
| Saved | Relative timestamp below button |
| Failure boundary | Parent callback and error handling determine recovery |
Interaction and composition
- Set lastSaved only after real persistence success.
- Do not assume every route uses the separate auto-save helper.
- The helper debounces changes by 1500ms and PATCHes course data.
- Keep a failed save visibly recoverable with the edit draft intact.
Accessibility and readiness
SaveButton awaits onClick without finally, so a rejection can leave localSaving true. useAutoSaveCourse logs failures rather than exposing a visible error. These are explicit readiness gaps; demo Saved text is a specimen state, not a successful live save.
Composition example
<SaveButton onClick={saveCourse} isSaving={saving}
lastSaved={lastSuccessfulSave} />Source references
| File | Responsibility |
|---|---|
| src/components/SaveButton.tsx | Commit label and relative timestamp |
| src/hooks/useCourseEditor.ts | Initial course hydration |
| src/hooks/useAutoSaveCourse.ts | Separate 1500ms debounced PATCH helper |
Examples from the app
Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1