From 2f3811d7c102e0d4c4f6973c16167db6582cf8f7 Mon Sep 17 00:00:00 2001
From: Jez <jez@jezweb.com.au>
Date: Sat, 8 Nov 2025 15:47:40 +1100
Subject: [PATCH] feat: add loading indicator for image uploads in todo form

- 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.
---
 src/modules/todos/components/todo-form.tsx | 43 ++++++++++++++++++----
 1 file changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/modules/todos/components/todo-form.tsx b/src/modules/todos/components/todo-form.tsx
index d26d514..e0a4c8a 100644
--- a/src/modules/todos/components/todo-form.tsx
+++ b/src/modules/todos/components/todo-form.tsx
@@ -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>
                         </div>
                     </form>