feat: add loading indicator for image uploads in todo form #25
Conversation
- Add spinning loader icon to submit button during submission - Show specific text when image is being uploaded: - 'Creating with image...' for new todos with images - 'Updating with image...' for editing todos with images - Generic 'Creating...' / 'Updating...' when no image - Disable cancel button during submission - Visual feedback improves UX during potentially slow image uploads Users now see clear indication that image upload is in progress.
WalkthroughThe todo-form component was enhanced to provide better user feedback during form submission. The Cancel button is now disabled while a save operation is pending, and the submit button displays a spinner with context-aware text indicating the operation type and whether an image is being processed. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/modules/todos/components/todo-form.tsx (1)
498-505: Consider the implications of disabling the Cancel button.While preventing accidental navigation during submission is good, users have no way to abort a slow or stuck operation (e.g., large R2 uploads on slow connections). Consider either:
- Keeping the button enabled but showing a confirmation dialog if clicked during submission
- Implementing proper cancellation using AbortController
| <Button type="submit" disabled={isPending}> | ||
| {isPending | ||
| ? initialData | ||
| ? "Updating..." | ||
| : "Creating..." | ||
| : initialData | ||
| ? "Update Todo" | ||
| : "Create Todo"} | ||
| {isPending ? ( | ||
| <span className="flex items-center gap-2"> | ||
| <svg | ||
| className="animate-spin h-4 w-4" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| > | ||
| <circle | ||
| className="opacity-25" | ||
| cx="12" | ||
| cy="12" | ||
| r="10" | ||
| stroke="currentColor" | ||
| strokeWidth="4" | ||
| /> | ||
| <path | ||
| className="opacity-75" | ||
| fill="currentColor" | ||
| d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" | ||
| /> | ||
| </svg> | ||
| {imageFile | ||
| ? initialData | ||
| ? "Updating with image..." | ||
| : "Creating with image..." | ||
| : initialData | ||
| ? "Updating..." | ||
| : "Creating..."} | ||
| </span> | ||
| ) : initialData ? ( | ||
| "Update Todo" | ||
| ) : ( | ||
| "Create Todo" | ||
| )} | ||
| </Button> |
There was a problem hiding this comment.
Add accessibility attributes for the loading state.
The spinner lacks ARIA attributes, and screen readers won't announce the state change to users relying on assistive technology.
Apply this diff to improve accessibility:
- <Button type="submit" disabled={isPending}>
+ <Button type="submit" disabled={isPending} aria-live="polite">
{isPending ? (
<span className="flex items-center gap-2">
<svg
className="animate-spin h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
+ aria-hidden="true"
>Consider using Loader2 from lucide-react for consistency.
The component already imports icons from lucide-react (Upload, X), but implements a custom SVG spinner. For consistency and maintainability, consider using the Loader2 icon from lucide-react.
-import { Upload, X } from "lucide-react";
+import { Loader2, Upload, X } from "lucide-react";Then replace the inline SVG:
{isPending ? (
<span className="flex items-center gap-2">
- <svg
- className="animate-spin h-4 w-4"
- xmlns="http://www.w3.org/2000/svg"
- fill="none"
- viewBox="0 0 24 24"
- >
- <circle
- className="opacity-25"
- cx="12"
- cy="12"
- r="10"
- stroke="currentColor"
- strokeWidth="4"
- />
- <path
- className="opacity-75"
- fill="currentColor"
- d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
- />
- </svg>
+ <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
{imageFile
? initialData
? "Updating with image..."📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Button type="submit" disabled={isPending}> | |
| {isPending | |
| ? initialData | |
| ? "Updating..." | |
| : "Creating..." | |
| : initialData | |
| ? "Update Todo" | |
| : "Create Todo"} | |
| {isPending ? ( | |
| <span className="flex items-center gap-2"> | |
| <svg | |
| className="animate-spin h-4 w-4" | |
| xmlns="http://www.w3.org/2000/svg" | |
| fill="none" | |
| viewBox="0 0 24 24" | |
| > | |
| <circle | |
| className="opacity-25" | |
| cx="12" | |
| cy="12" | |
| r="10" | |
| stroke="currentColor" | |
| strokeWidth="4" | |
| /> | |
| <path | |
| className="opacity-75" | |
| fill="currentColor" | |
| d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" | |
| /> | |
| </svg> | |
| {imageFile | |
| ? initialData | |
| ? "Updating with image..." | |
| : "Creating with image..." | |
| : initialData | |
| ? "Updating..." | |
| : "Creating..."} | |
| </span> | |
| ) : initialData ? ( | |
| "Update Todo" | |
| ) : ( | |
| "Create Todo" | |
| )} | |
| </Button> | |
| <Button type="submit" disabled={isPending} aria-live="polite"> | |
| {isPending ? ( | |
| <span className="flex items-center gap-2"> | |
| <svg | |
| className="animate-spin h-4 w-4" | |
| xmlns="http://www.w3.org/2000/svg" | |
| fill="none" | |
| viewBox="0 0 24 24" | |
| aria-hidden="true" | |
| > | |
| <circle | |
| className="opacity-25" | |
| cx="12" | |
| cy="12" | |
| r="10" | |
| stroke="currentColor" | |
| strokeWidth="4" | |
| /> | |
| <path | |
| className="opacity-75" | |
| fill="currentColor" | |
| d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" | |
| /> | |
| </svg> | |
| {imageFile | |
| ? initialData | |
| ? "Updating with image..." | |
| : "Creating with image..." | |
| : initialData | |
| ? "Updating..." | |
| : "Creating..."} | |
| </span> | |
| ) : initialData ? ( | |
| "Update Todo" | |
| ) : ( | |
| "Create Todo" | |
| )} | |
| </Button> |
🤖 Prompt for AI Agents
In src/modules/todos/components/todo-form.tsx around lines 506-542, the loading
spinner lacks ARIA attributes and uses a custom inline SVG; update the markup to
improve accessibility and consistency by: 1) set the Button element to reflect
loading (add aria-busy={isPending} and disabled remains), 2) replace the inline
SVG with the imported Loader2 icon from lucide-react and give it
aria-hidden="true" and proper sizing classes, 3) wrap the spinner and label in a
span with role="status" and aria-live="polite" (or include a visually-hidden
text node such as "Loading…" inside) so screen readers are notified, and 4) keep
the visible text logic but ensure the button also has an accessible label when
only an icon is shown. Implement these changes without altering button visuals.
1 participant
Summary
Adds visual loading feedback during todo form submission, with specific messaging when images are being uploaded.
Changes
animate-spinutilityUser Experience
Before: Click submit → button shows "Creating..." → no indication of image upload
After: Click submit with image → spinner appears → "Creating with image..." → clear feedback
Benefits
Code Quality
isPendingandimageFilestatesTesting
Part of UX improvements to provide better feedback during async operations.
Summary by CodeRabbit
Bug Fixes
New Features