Skip to content

feat: add loading indicator for image uploads in todo form #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add loading indicator for image uploads in todo form #25

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 36 additions & 7 deletions src/modules/todos/components/todo-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -499,17 +499,46 @@ export function TodoForm({
type="button"
variant="outline"
onClick={() => window.history.back()}
disabled={isPending}
>
Cancel
</Button>
<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>
Comment on lines 506 to 542
Copy link

@coderabbitai coderabbitai bot Nov 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

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.

Suggested change
<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.

</div>
</form>
Expand Down