Monorepo for Tangled tangled.org

appview: pages: add spinners to more buttons

This commit adds spinners to what I believe to be all the buttons on the
following pages:
- follow: add spinner to follow button
- issues/new: add spinner to create button
- issue: add spinners to close/reopen issue buttons
- issueComment: add spinner to delete button
- editIssueComment: add spinner to check mark button
- pulls/new: add spinner to create button
- pullNewComment: add spinner to comment button, submit and cancel
- pullResubmit: add spinners to resubmit / cancel button
- settings: add spinners to buttons
- knots: add spinners to buttons
- settings: add spinners to user settings page

authored by brookjeynes.dev and committed by Tangled d0be79b0 050c5aef

Changed files
+172 -63
appview
+11 -5
appview/pages/templates/knots.html
··· 10 10 <form 11 11 hx-post="/knots/key" 12 12 class="max-w-2xl mb-8 space-y-4" 13 + hx-indicator="#generate-knot-key-spinner" 13 14 > 14 15 <input 15 16 type="text" ··· 18 19 placeholder="knot.example.com" 19 20 required 20 21 class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400" 21 - /> 22 - <button class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600" type="submit"> 23 - generate key 22 + > 23 + <button class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 flex gap-2 items-center" type="submit"> 24 + <span>generate key</span> 25 + <span id="generate-knot-key-spinner" class="group"> 26 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 27 + </span> 24 28 </button> 25 29 <div id="settings-knots-error" class="error dark:text-red-400"></div> 26 30 </form> ··· 70 74 </div> 71 75 <div class="flex gap-2 items-center"> 72 76 <button 73 - class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 gap-2" 74 - hx-post="/knots/{{ .Domain }}/init"> 77 + class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 flex gap-2 items-center group" 78 + hx-post="/knots/{{ .Domain }}/init" 79 + > 75 80 {{ i "square-play" "w-5 h-5" }} 76 81 <span class="hidden md:inline">initialize</span> 82 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 77 83 </button> 78 84 </div> 79 85 </div>
+2 -1
appview/pages/templates/repo/issues/fragments/editIssueComment.html
··· 23 23 </a> 24 24 25 25 <button 26 - class="btn px-2 py-1 flex items-center gap-2 text-sm" 26 + class="btn px-2 py-1 flex items-center gap-2 text-sm group" 27 27 hx-post="/{{ $.RepoInfo.FullName }}/issues/{{ .Issue }}/comment/{{ .CommentId }}/edit" 28 28 hx-include="#edit-textarea-{{ .CommentId }}" 29 29 hx-target="#comment-container-{{ .CommentId }}" 30 30 hx-swap="outerHTML"> 31 31 {{ i "check" "w-4 h-4" }} 32 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 32 33 </button> 33 34 <button 34 35 class="btn px-2 py-1 flex items-center gap-2 text-sm"
+2 -1
appview/pages/templates/repo/issues/fragments/issueComment.html
··· 38 38 {{ i "pencil" "w-4 h-4" }} 39 39 </button> 40 40 <button 41 - class="btn px-2 py-1 text-sm text-red-500" 41 + class="btn px-2 py-1 text-sm text-red-500 flex gap-2 items-center group" 42 42 hx-delete="/{{ $.RepoInfo.FullName }}/issues/{{ .Issue }}/comment/{{ .CommentId }}/" 43 43 hx-confirm="Are you sure you want to delete your comment?" 44 44 hx-swap="outerHTML" 45 45 hx-target="#comment-container-{{.CommentId}}" 46 46 > 47 47 {{ i "trash-2" "w-4 h-4" }} 48 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 48 49 </button> 49 50 {{ end }} 50 51
+27 -6
appview/pages/templates/repo/issues/issue.html
··· 85 85 86 86 <div class="flex gap-2 mt-2"> 87 87 <button 88 - id="comment-button" 89 - hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment" 90 - type="submit" 88 + id="comment-button" 89 + hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment" 90 + type="submit" 91 91 hx-disabled-elt="#comment-button" 92 - class="btn p-2 flex items-center gap-2 no-underline hover:no-underline" 92 + class="btn p-2 flex items-center gap-2 no-underline hover:no-underline group" 93 93 disabled 94 94 > 95 95 {{ i "message-square-plus" "w-4 h-4" }} 96 96 comment 97 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 97 98 </button> 98 99 99 100 {{ $isIssueAuthor := and .LoggedInUser (eq .LoggedInUser.Did .Issue.OwnerDid) }} ··· 103 104 id="close-button" 104 105 type="button" 105 106 class="btn flex items-center gap-2" 107 + hx-indicator="#close-spinner" 106 108 hx-trigger="click" 107 109 > 108 110 {{ i "ban" "w-4 h-4" }} 109 111 close 112 + <span id="close-spinner" class="group"> 113 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 114 + </span> 110 115 </button> 111 116 <div 112 117 id="close-with-comment" ··· 114 119 hx-trigger="click from:#close-button" 115 120 hx-disabled-elt="#close-with-comment" 116 121 hx-target="#issue-comment" 122 + hx-indicator="#close-spinner" 117 123 hx-vals="js:{body: document.getElementById('comment-textarea').value.trim() !== '' ? document.getElementById('comment-textarea').value : ''}" 118 124 hx-swap="none" 119 125 > ··· 124 130 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/close" 125 131 hx-trigger="click from:#close-button" 126 132 hx-target="#issue-action" 133 + hx-indicator="#close-spinner" 127 134 hx-swap="none" 128 135 > 129 136 </div> ··· 143 150 type="button" 144 151 class="btn flex items-center gap-2" 145 152 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/reopen" 153 + hx-indicator="#reopen-spinner" 146 154 hx-swap="none" 147 155 > 148 156 {{ i "refresh-ccw-dot" "w-4 h-4" }} 149 157 reopen 158 + <span id="reopen-spinner" class="group"> 159 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 160 + </span> 150 161 </button> 151 162 {{ end }} 152 163 ··· 164 175 165 176 if (closeButton) { 166 177 if (textarea.value.trim() !== '') { 167 - closeButton.innerHTML = '{{ i "ban" "w-4 h-4" }} close with comment'; 178 + closeButton.innerHTML = ` 179 + {{ i "ban" "w-4 h-4" }} 180 + <span>close with comment</span> 181 + <span id="close-spinner" class="group"> 182 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 183 + </span>`; 168 184 } else { 169 - closeButton.innerHTML = '{{ i "ban" "w-4 h-4" }} close'; 185 + closeButton.innerHTML = ` 186 + {{ i "ban" "w-4 h-4" }} 187 + <span>close</span> 188 + <span id="close-spinner" class="group"> 189 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 190 + </span>`; 170 191 } 171 192 } 172 193 }
+7 -1
appview/pages/templates/repo/issues/new.html
··· 5 5 hx-post="/{{ .RepoInfo.FullName }}/issues/new" 6 6 class="mt-6 space-y-6" 7 7 hx-swap="none" 8 + hx-indicator="#spinner" 8 9 > 9 10 <div class="flex flex-col gap-4"> 10 11 <div> ··· 22 23 ></textarea> 23 24 </div> 24 25 <div> 25 - <button type="submit" class="btn">create</button> 26 + <button type="submit" class="btn flex items-center gap-2"> 27 + create 28 + <span id="spinner" class="group"> 29 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 30 + </span> 31 + </button> 26 32 </div> 27 33 </div> 28 34 <div id="issues" class="error"></div>
+16 -7
appview/pages/templates/repo/pulls/fragments/pullNewComment.html
··· 7 7 </div> 8 8 <form 9 9 hx-post="/{{ .RepoInfo.FullName }}/pulls/{{ .Pull.PullId }}/round/{{ .RoundNumber }}/comment" 10 + hx-indicator="#create-comment-spinner" 10 11 hx-swap="none" 11 - class="w-full flex flex-wrap gap-2"> 12 + class="w-full flex flex-wrap gap-2" 13 + > 12 14 <textarea 13 15 name="body" 14 16 class="w-full p-2 rounded border border-gray-200" 15 - placeholder="Add to the discussion..."></textarea> 17 + placeholder="Add to the discussion..."></textarea 18 + > 16 19 <button type="submit" class="btn flex items-center gap-2"> 17 - {{ i "message-square" "w-4 h-4" }} comment 20 + {{ i "message-square" "w-4 h-4" }} 21 + <span>comment</span> 22 + <span id="create-comment-spinner" class="group"> 23 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 24 + </span> 18 25 </button> 19 - <button 20 - type="button" 21 - class="btn flex items-center gap-2" 26 + <button 27 + type="button" 28 + class="btn flex items-center gap-2 group" 22 29 hx-get="/{{ .RepoInfo.FullName }}/pulls/{{ .Pull.PullId }}/round/{{ .RoundNumber }}/actions" 23 30 hx-swap="outerHTML" 24 - hx-target="#pull-comment-card-{{ .RoundNumber }}"> 31 + hx-target="#pull-comment-card-{{ .RoundNumber }}" 32 + > 25 33 {{ i "x" "w-4 h-4" }} 26 34 <span>cancel</span> 35 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 27 36 </button> 28 37 <div id="pull-comment"></div> 29 38 </form>
+20 -7
appview/pages/templates/repo/pulls/fragments/pullResubmit.html
··· 18 18 <form 19 19 hx-post="/{{ .RepoInfo.FullName }}/pulls/{{ .Pull.PullId }}/resubmit" 20 20 hx-swap="none" 21 - class="w-full flex flex-wrap gap-2"> 21 + class="w-full flex flex-wrap gap-2" 22 + hx-indicator="#resubmit-spinner" 23 + > 22 24 <textarea 23 25 name="patch" 24 26 class="w-full p-2 mb-2" 25 27 placeholder="Paste your updated patch here." 26 28 rows="15" 27 - >{{.Pull.LatestPatch}}</textarea> 29 + > 30 + {{.Pull.LatestPatch}} 31 + </textarea> 28 32 <button 29 33 type="submit" 30 34 class="btn flex items-center gap-2" 31 35 {{ if or .Pull.State.IsClosed }} 32 36 disabled 33 - {{ end }}> 37 + {{ end }} 38 + > 34 39 {{ i "rotate-ccw" "w-4 h-4" }} 35 40 <span>resubmit</span> 41 + <span id="resubmit-spinner" class="group"> 42 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 43 + </span> 36 44 </button> 37 - <button 38 - type="button" 39 - class="btn flex items-center gap-2" 45 + <button 46 + type="button" 47 + class="btn flex items-center gap-2" 40 48 hx-get="/{{ .RepoInfo.FullName }}/pulls/{{ .Pull.PullId }}/round/{{ .Pull.LastRoundNumber }}/actions" 41 49 hx-swap="outerHTML" 42 - hx-target="#resubmit-pull-card"> 50 + hx-target="#resubmit-pull-card" 51 + hx-indicator="#cancel-resubmit-spinner" 52 + > 43 53 {{ i "x" "w-4 h-4" }} 44 54 <span>cancel</span> 55 + <span id="cancel-resubmit-spinner" class="group"> 56 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 57 + </span> 45 58 </button> 46 59 </form> 47 60
+4
appview/pages/templates/repo/pulls/new.html
··· 4 4 <form 5 5 hx-post="/{{ .RepoInfo.FullName }}/pulls/new" 6 6 class="mt-6 space-y-6" 7 + hx-indicator="#create-pull-spinner" 7 8 hx-swap="none" 8 9 > 9 10 <div class="flex flex-col gap-4"> ··· 105 106 <button type="submit" class="btn flex items-center gap-2"> 106 107 {{ i "git-pull-request-create" "w-4 h-4" }} 107 108 create pull 109 + <span id="create-pull-spinner" class="group"> 110 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 111 + </span> 108 112 </button> 109 113 </div> 110 114 </div>
+46 -24
appview/pages/templates/repo/settings.html
··· 23 23 </div> 24 24 25 25 {{ if .RepoInfo.Roles.CollaboratorInviteAllowed }} 26 - <form hx-put="/{{ $.RepoInfo.FullName }}/settings/collaborator"> 27 - <label for="collaborator" class="dark:text-white" 28 - >add collaborator</label 29 - > 26 + <form 27 + hx-put="/{{ $.RepoInfo.FullName }}/settings/collaborator" 28 + class="group" 29 + > 30 + <label for="collaborator" class="dark:text-white"> 31 + add collaborator 32 + </label> 30 33 <input 31 34 type="text" 32 35 id="collaborator" ··· 34 37 required 35 38 class="dark:bg-gray-700 dark:text-white" 36 39 placeholder="enter did or handle" 37 - /> 40 + > 38 41 <button 39 - class="btn my-2 dark:text-white dark:hover:bg-gray-700" 42 + class="btn my-2 flex gap-2 items-center dark:text-white dark:hover:bg-gray-700" 40 43 type="text" 41 44 > 42 - add 45 + <span>add</span> 46 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 43 47 </button> 44 48 </form> 45 49 {{ end }} 46 50 47 - <form hx-put="/{{ $.RepoInfo.FullName }}/settings/branches/default" class="mt-6"> 51 + <form 52 + hx-put="/{{ $.RepoInfo.FullName }}/settings/branches/default" 53 + class="mt-6 group" 54 + > 48 55 <label for="branch">default branch</label> 49 - <select id="branch" name="branch" required class="p-1 border border-gray-200 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700"> 50 - {{ range .Branches }} 51 - <option 52 - value="{{ . }}" 53 - class="py-1" 54 - {{ if eq . $.DefaultBranch }} 55 - selected 56 - {{ end }} 57 - > 58 - {{ . }} 59 - </option> 60 - {{ end }} 61 - </select> 62 - <button class="btn my-2" type="text">save</button> 56 + <div class="flex gap-2 items-center"> 57 + <select id="branch" name="branch" required class="p-1 border border-gray-200 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700"> 58 + {{ range .Branches }} 59 + <option 60 + value="{{ . }}" 61 + class="py-1" 62 + {{ if eq . $.DefaultBranch }} 63 + selected 64 + {{ end }} 65 + > 66 + {{ . }} 67 + </option> 68 + {{ end }} 69 + </select> 70 + <button class="btn my-2 flex gap-2 items-center" type="text"> 71 + <span>save</span> 72 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 73 + </button> 74 + </div> 63 75 </form> 64 76 65 77 {{ if .RepoInfo.Roles.RepoDeleteAllowed }} 66 - <form hx-confirm="Are you sure you want to delete this repository?" hx-delete="/{{ $.RepoInfo.FullName }}/settings/delete" class="mt-6"> 78 + <form 79 + hx-confirm="Are you sure you want to delete this repository?" 80 + hx-delete="/{{ $.RepoInfo.FullName }}/settings/delete" 81 + class="mt-6" 82 + hx-indicator="#delete-repo-spinner" 83 + > 67 84 <label for="branch">delete repository</label> 68 - <button class="btn my-2" type="text">delete</button> 85 + <button class="btn my-2 flex gap-2 items-center" type="text"> 86 + <span>delete</span> 87 + <span id="delete-repo-spinner" class="group"> 88 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 89 + </span> 90 + </button> 69 91 <span> 70 92 Deleting a repository is irreversible and permanent. 71 93 </span>
+35 -10
appview/pages/templates/settings.html
··· 45 45 </div> 46 46 </div> 47 47 <button 48 - class="btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 gap-2" 48 + class="btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 gap-2 group" 49 49 title="Delete key" 50 50 hx-delete="/settings/keys?name={{urlquery .Name}}&rkey={{urlquery .Rkey}}&key={{urlquery .Key}}" 51 - hx-confirm="Are you sure you want to delete the key '{{ .Name }}'?"> 51 + hx-confirm="Are you sure you want to delete the key '{{ .Name }}'?" 52 + > 52 53 {{ i "trash-2" "w-5 h-5" }} 53 54 <span class="hidden md:inline">delete</span> 55 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 54 56 </button> 55 57 </div> 56 58 {{ end }} 57 59 </div> 58 60 <form 59 61 hx-put="/settings/keys" 62 + hx-indicator="#add-sshkey-spinner" 60 63 hx-swap="none" 61 64 class="max-w-2xl mb-8 space-y-4" 62 65 > ··· 75 78 required 76 79 class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"/> 77 80 78 - <button class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600" type="submit">add key</button> 81 + <button class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 flex gap-2 items-center" type="submit"> 82 + <span>add key</span> 83 + <span id="add-sshkey-spinner" class="group"> 84 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 85 + </span> 86 + </button> 79 87 80 88 <div id="settings-keys" class="error dark:text-red-400"></div> 81 89 </form> ··· 129 137 </a> 130 138 {{ end }} 131 139 {{ if not .Primary }} 132 - <form hx-delete="/settings/emails" hx-confirm="Are you sure you wish to delete the email '{{ .Address }}'?"> 140 + <form 141 + hx-delete="/settings/emails" 142 + hx-confirm="Are you sure you wish to delete the email '{{ .Address }}'?" 143 + hx-indicator="#delete-email-{{ .Address }}-spinner" 144 + > 133 145 <input type="hidden" name="email" value="{{ .Address }}"> 134 146 <button 135 - class="btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300" 147 + class="btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 flex gap-2 items-center" 136 148 title="Delete email" 137 - type="submit"> 149 + type="submit" 150 + > 138 151 {{ i "trash-2" "w-5 h-5" }} 139 152 <span class="hidden md:inline">delete</span> 153 + <span id="delete-email-{{ .Address }}-spinner" class="group"> 154 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 155 + </span> 140 156 </button> 141 157 </form> 142 158 {{ end }} ··· 148 164 hx-put="/settings/emails" 149 165 hx-swap="none" 150 166 class="max-w-2xl mb-8 space-y-4" 167 + hx-indicator="#add-email-spinner" 151 168 > 152 169 <input 153 170 type="email" ··· 155 172 name="email" 156 173 placeholder="your@email.com" 157 174 required 158 - class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"/> 175 + class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400" 176 + > 159 177 160 - <button class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600" type="submit">add email</button> 178 + <button 179 + class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 flex gap-2 items-center" 180 + type="submit" 181 + > 182 + <span>add email</span> 183 + <span id="add-email-spinner" class="group"> 184 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 185 + </span> 186 + </button> 161 187 162 188 <div id="settings-emails-error" class="error dark:text-red-400"></div> 163 189 <div id="settings-emails-success" class="success dark:text-green-400"></div> 164 - 165 190 </form> 166 191 </section> 167 - {{ end }} 192 + {{ end }}
+2 -1
appview/pages/templates/user/fragments/follow.html
··· 1 1 {{ define "user/fragments/follow" }} 2 2 <button id="followBtn" 3 - class="btn mt-2 w-full" 3 + class="btn mt-2 w-full flex gap-2 items-center group" 4 4 5 5 {{ if eq .FollowStatus.String "IsNotFollowing" }} 6 6 hx-post="/follow?subject={{.UserDid}}" ··· 13 13 hx-swap="outerHTML" 14 14 > 15 15 {{ if eq .FollowStatus.String "IsNotFollowing" }}Follow{{ else }}Unfollow{{ end }} 16 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 16 17 </button> 17 18 {{ end }}