fix: no proper loading feedback on forms

internal/ui/components/button/submit.templ

@@ -0,0 +1,22 @@
+package button
+
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
+
+templ Submit(props ...Props) {
+	{{ var p Props }}
+	if len(props) > 0 {
+		{{ p = props[0] }}
+	}
+	if p.Type == "" {
+		{{ p.Type = TypeSubmit }}
+	}
+	{{ p.Class = p.Class + " htmx-submit-btn" }}
+	@Button(p) {
+		<span class="btn-label contents">
+			{ children... }
+		</span>
+		<span class="btn-spinner">
+			@icon.LoaderCircle(icon.Props{Class: "animate-spin"})
+		</span>
+	}
+}

internal/ui/components/expense/expense.templ

@@ -165,7 +165,7 @@ templ AddExpenseForm(props AddExpenseFormProps) {
 		// Shopping list items selector
 		@ItemSelectorSection(props.ListsWithItems, false)
 		<div class="flex justify-end">
-			@button.Button(button.Props{Type: button.TypeSubmit}) {
+			@button.Submit() {
 				Save
 			}
 		</div>
@@ -267,7 +267,7 @@ templ EditExpenseForm(spaceID string, exp *model.ExpenseWithTagsAndMethod, metho
 		// Payment Method
 		@paymentmethod.MethodSelector(methods, exp.PaymentMethodID)
 		<div class="flex justify-end">
-			@button.Button(button.Props{Type: button.TypeSubmit}) {
+			@button.Submit() {
 				Save
 			}
 		</div>

internal/ui/components/moneyaccount/moneyaccount.templ

@@ -184,7 +184,7 @@ templ CreateAccountForm(spaceID string, dialogID string) {
 			})
 		</div>
 		<div class="flex justify-end">
-			@button.Button(button.Props{Type: button.TypeSubmit}) {
+			@button.Submit() {
 				Create
 			}
 		</div>
@@ -212,7 +212,7 @@ templ EditAccountForm(spaceID string, acct *model.MoneyAccount, dialogID string)
 			})
 		</div>
 		<div class="flex justify-end">
-			@button.Button(button.Props{Type: button.TypeSubmit}) {
+			@button.Submit() {
 				Save
 			}
 		</div>
@@ -253,7 +253,7 @@ templ TransferForm(spaceID string, accountID string, direction model.TransferDir
 			})
 		</div>
 		<div class="flex justify-end">
-			@button.Button(button.Props{Type: button.TypeSubmit}) {
+			@button.Submit() {
 				if direction == model.TransferDirectionDeposit {
 					Deposit
 				} else {

internal/ui/components/paymentmethod/paymentmethod.templ

@@ -154,7 +154,7 @@ templ CreateMethodForm(spaceID string, dialogID string) {
 			})
 		</div>
 		<div class="flex justify-end">
-			@button.Button(button.Props{Type: button.TypeSubmit}) {
+			@button.Submit() {
 				Create
 			}
 		</div>
@@ -231,7 +231,7 @@ templ EditMethodForm(spaceID string, method *model.PaymentMethod, dialogID strin
 			})
 		</div>
 		<div class="flex justify-end">
-			@button.Button(button.Props{Type: button.TypeSubmit}) {
+			@button.Submit() {
 				Save
 			}
 		</div>

internal/ui/components/recurring/recurring.templ

@@ -268,7 +268,7 @@ templ AddRecurringForm(spaceID string, tags []*model.Tag, methods []*model.Payme
 		// Payment Method
 		@paymentmethod.MethodSelector(methods, nil)
 		<div class="flex justify-end">
-			@button.Button(button.Props{Type: button.TypeSubmit}) {
+			@button.Submit() {
 				Save
 			}
 		</div>
@@ -401,7 +401,7 @@ templ EditRecurringForm(spaceID string, re *model.RecurringExpenseWithTagsAndMet
 		// Payment Method
 		@paymentmethod.MethodSelector(methods, re.PaymentMethodID)
 		<div class="flex justify-end">
-			@button.Button(button.Props{Type: button.TypeSubmit}) {
+			@button.Submit() {
 				Save
 			}
 		</div>

internal/ui/components/shoppinglist/shoppinglist.templ

@@ -35,8 +35,7 @@ templ ListCard(spaceID string, list *model.ShoppingList, items []*model.ListItem
 						"autocomplete": "off",
 					},
 				})
-				@button.Button(button.Props{
-					Type: button.TypeSubmit,
+				@button.Submit(button.Props{
 					Size: button.SizeSm,
 				}) {
 					@icon.Plus(icon.Props{Size: 16})