From 16b0cc4b22e154bde3240d04e1ffca2fe9fb316a Mon Sep 17 00:00:00 2001 From: oppiliappan Date: Tue, 13 May 2025 09:55:17 +0100 Subject: [PATCH] appview: add spinners to all buttons how it works: - hx-indicator adds the htmx-request class to the target of choice - with tailwind, we can use `group-[.class]` to check if a parent element has a certain class, and style things conditionally - by applying `group-[.htmx-request]`, we can detect when a request is in progress, and show/hide a lucide loader - the loader is a static icon made to spin using the `animate-spin` class --- appview/pages/templates/layouts/base.html | 1 + .../templates/repo/fragments/repoActions.html | 25 ++++++++++--------- appview/pages/templates/repo/new.html | 9 +++++-- .../repo/pulls/fragments/pullActions.html | 23 ++++++++++------- appview/pages/templates/repo/pulls/pull.html | 12 ++++++--- .../templates/user/fragments/editBio.html | 6 ++++- .../templates/user/fragments/editPins.html | 6 ++++- .../templates/user/fragments/profileCard.html | 3 ++- appview/pages/templates/user/profile.html | 6 ++++- 9 files changed, 60 insertions(+), 31 deletions(-) diff --git a/appview/pages/templates/layouts/base.html b/appview/pages/templates/layouts/base.html index 9db73639..1501f5f9 100644 --- a/appview/pages/templates/layouts/base.html +++ b/appview/pages/templates/layouts/base.html @@ -7,6 +7,7 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> + {{ block "title" . }}{{ end }} ยท tangled diff --git a/appview/pages/templates/repo/fragments/repoActions.html b/appview/pages/templates/repo/fragments/repoActions.html index dab8386e..64fdb8db 100644 --- a/appview/pages/templates/repo/fragments/repoActions.html +++ b/appview/pages/templates/repo/fragments/repoActions.html @@ -2,7 +2,7 @@
{{ if .DisableFork }}
diff --git a/appview/pages/templates/repo/new.html b/appview/pages/templates/repo/new.html index 759028c7..7b912712 100644 --- a/appview/pages/templates/repo/new.html +++ b/appview/pages/templates/repo/new.html @@ -5,7 +5,7 @@

Create a new repository

-
+
- +
diff --git a/appview/pages/templates/repo/pulls/fragments/pullActions.html b/appview/pages/templates/repo/pulls/fragments/pullActions.html index 8869b453..c4e4077c 100644 --- a/appview/pages/templates/repo/pulls/fragments/pullActions.html +++ b/appview/pages/templates/repo/pulls/fragments/pullActions.html @@ -17,9 +17,10 @@ hx-get="/{{ .RepoInfo.FullName }}/pulls/{{ .Pull.PullId }}/round/{{ $roundNumber }}/comment" hx-target="#actions-{{$roundNumber}}" hx-swap="outerHtml" - class="btn p-2 flex items-center gap-2 no-underline hover:no-underline"> + class="btn p-2 flex items-center gap-2 no-underline hover:no-underline group"> {{ i "message-square-plus" "w-4 h-4" }} comment + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} {{ if and $isPushAllowed $isOpen $isLastRound }} {{ $disabled := "" }} @@ -30,9 +31,10 @@ hx-post="/{{ .RepoInfo.FullName }}/pulls/{{ .Pull.PullId }}/merge" hx-swap="none" hx-confirm="Are you sure you want to merge pull #{{ .Pull.PullId }} into the `{{ .Pull.TargetBranch }}` branch?" - class="btn p-2 flex items-center gap-2" {{ $disabled }}> + class="btn p-2 flex items-center gap-2 group" {{ $disabled }}> {{ i "git-merge" "w-4 h-4" }} - merge + merge + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} {{ end }} @@ -51,7 +53,7 @@ {{ end }} hx-disabled-elt="#resubmitBtn" - class="btn p-2 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed" {{ $disabled }} + class="btn p-2 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed group" {{ $disabled }} {{ if $disabled }} title="Update this branch to resubmit this pull request" @@ -59,8 +61,9 @@ title="Resubmit this pull request" {{ end }} > - {{ i "rotate-ccw" "w-4 h-4" }} + {{ i "rotate-ccw" "w-4 h-4" }} resubmit + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} {{ end }} @@ -68,9 +71,10 @@ {{ end }} @@ -78,9 +82,10 @@ {{ end }}
diff --git a/appview/pages/templates/repo/pulls/pull.html b/appview/pages/templates/repo/pulls/pull.html index 69cb4594..e0115edb 100644 --- a/appview/pages/templates/repo/pulls/pull.html +++ b/appview/pages/templates/repo/pulls/pull.html @@ -51,16 +51,20 @@
- - {{ i "file-diff" "w-4 h-4" }} + {{ i "file-diff" "w-4 h-4" }} + + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} {{ if not (eq .RoundNumber 0) }} - - {{ i "chevrons-left-right-ellipsis" "w-4 h-4 rotate-90" }} + {{ i "chevrons-left-right-ellipsis" "w-4 h-4 rotate-90" }} + + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} {{ end }} diff --git a/appview/pages/templates/user/fragments/editBio.html b/appview/pages/templates/user/fragments/editBio.html index b09e44d6..042acd94 100644 --- a/appview/pages/templates/user/fragments/editBio.html +++ b/appview/pages/templates/user/fragments/editBio.html @@ -3,7 +3,8 @@ hx-post="/profile/bio" class="flex flex-col gap-4 my-2 max-w-full" hx-disabled-elt="#save-btn,#cancel-btn" - hx-swap="none"> + hx-swap="none" + hx-indicator="#spinner">
{{ $description := "" }} {{ if and .Profile .Profile.Description }} @@ -75,6 +76,9 @@
{{ end }}
diff --git a/appview/pages/templates/user/profile.html b/appview/pages/templates/user/profile.html index 152b79d9..f69f2fd8 100644 --- a/appview/pages/templates/user/profile.html +++ b/appview/pages/templates/user/profile.html @@ -235,9 +235,13 @@ {{ if and .LoggedInUser (eq .LoggedInUser.Did .Card.UserDid) }} - {{ end }}
-- 2.51.2