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

appview/pages/templates/knots.html

···
       <form 
         hx-post="/knots/key"
         class="max-w-2xl mb-8 space-y-4"
+        hx-indicator="#generate-knot-key-spinner"
       >
         <input
           type="text"
···
           placeholder="knot.example.com"
           required
           class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"
-        />
-        <button class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600" type="submit">
-          generate key
+        >
+        <button class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 flex gap-2 items-center" type="submit">
+          <span>generate key</span>
+          <span id="generate-knot-key-spinner" class="group">
+            {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+          </span>
         </button>
         <div id="settings-knots-error" class="error dark:text-red-400"></div>
       </form>
···
             </div>
             <div class="flex gap-2 items-center">
               <button
-                class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 gap-2"
-                hx-post="/knots/{{ .Domain }}/init">
+                class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 flex gap-2 items-center group"
+                hx-post="/knots/{{ .Domain }}/init"
+              >
                 {{ i "square-play" "w-5 h-5" }}
                 <span class="hidden md:inline">initialize</span>
+                {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
               </button>
             </div>
           </div>

appview/pages/templates/repo/issues/fragments/editIssueComment.html

···
       </a>
 
       <button
-        class="btn px-2 py-1 flex items-center gap-2 text-sm"
+        class="btn px-2 py-1 flex items-center gap-2 text-sm group"
         hx-post="/{{ $.RepoInfo.FullName }}/issues/{{ .Issue }}/comment/{{ .CommentId }}/edit"
         hx-include="#edit-textarea-{{ .CommentId }}"
         hx-target="#comment-container-{{ .CommentId }}"
         hx-swap="outerHTML">
         {{ i "check" "w-4 h-4" }}
+        {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
       </button>
       <button
         class="btn px-2 py-1  flex items-center gap-2 text-sm"

appview/pages/templates/repo/issues/fragments/issueComment.html

···
         {{ i "pencil" "w-4 h-4" }}
       </button>
       <button 
-        class="btn px-2 py-1 text-sm text-red-500"
+        class="btn px-2 py-1 text-sm text-red-500 flex gap-2 items-center group"
         hx-delete="/{{ $.RepoInfo.FullName }}/issues/{{ .Issue }}/comment/{{ .CommentId }}/"
         hx-confirm="Are you sure you want to delete your comment?"
         hx-swap="outerHTML"
         hx-target="#comment-container-{{.CommentId}}"
         >
         {{ i "trash-2" "w-4 h-4" }}
+        {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
       </button>
       {{ end }}
 

appview/pages/templates/repo/issues/issue.html

···
     
     <div class="flex gap-2 mt-2">
         <button 
-            id="comment-button" 
-            hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment" 
-            type="submit" 
+            id="comment-button"
+            hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment"
+            type="submit"
             hx-disabled-elt="#comment-button"
-            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"
             disabled
         >
             {{ i "message-square-plus" "w-4 h-4" }}
             comment
+            {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
         </button>
 
         {{ $isIssueAuthor := and .LoggedInUser (eq .LoggedInUser.Did .Issue.OwnerDid) }}
···
             id="close-button"
             type="button" 
             class="btn flex items-center gap-2"
+            hx-indicator="#close-spinner"
             hx-trigger="click"
         >
             {{ i "ban" "w-4 h-4" }}
             close
+            <span id="close-spinner" class="group">
+                {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+            </span>
         </button>
         <div 
             id="close-with-comment" 
···
             hx-trigger="click from:#close-button" 
             hx-disabled-elt="#close-with-comment"
             hx-target="#issue-comment"
+            hx-indicator="#close-spinner"
             hx-vals="js:{body: document.getElementById('comment-textarea').value.trim() !== '' ? document.getElementById('comment-textarea').value : ''}"
             hx-swap="none"
         >
···
             hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/close" 
             hx-trigger="click from:#close-button" 
             hx-target="#issue-action"
+            hx-indicator="#close-spinner"
             hx-swap="none"
         >
         </div>
···
             type="button" 
             class="btn flex items-center gap-2"
             hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/reopen"
+            hx-indicator="#reopen-spinner"
             hx-swap="none"
         >
             {{ i "refresh-ccw-dot" "w-4 h-4" }}
             reopen
+            <span id="reopen-spinner" class="group">
+              {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+            </span>
         </button>
         {{ end }}
 
···
 
             if (closeButton) {
                 if (textarea.value.trim() !== '') {
-                    closeButton.innerHTML = '{{ i "ban" "w-4 h-4" }} close with comment';
+                    closeButton.innerHTML = `
+{{ i "ban" "w-4 h-4" }}
+<span>close with comment</span>
+<span id="close-spinner" class="group">
+    {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+</span>`;
                 } else {
-                    closeButton.innerHTML = '{{ i "ban" "w-4 h-4" }} close';
+                    closeButton.innerHTML = `
+{{ i "ban" "w-4 h-4" }}
+<span>close</span>
+<span id="close-spinner" class="group">
+    {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+</span>`;
                 }
             }
         }

appview/pages/templates/repo/issues/new.html

···
         hx-post="/{{ .RepoInfo.FullName }}/issues/new"
         class="mt-6 space-y-6"
         hx-swap="none"
+        hx-indicator="#spinner"
     >
         <div class="flex flex-col gap-4">
             <div>
···
                 ></textarea>
             </div>
             <div>
-                <button type="submit" class="btn">create</button>
+                <button type="submit" class="btn flex items-center gap-2">
+                    create
+                    <span id="spinner" class="group">
+                      {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+                    </span>
+                </button>
             </div>
         </div>
         <div id="issues" class="error"></div>

appview/pages/templates/repo/pulls/fragments/pullNewComment.html

···
   </div>
   <form
     hx-post="/{{ .RepoInfo.FullName }}/pulls/{{ .Pull.PullId }}/round/{{ .RoundNumber }}/comment"
+    hx-indicator="#create-comment-spinner"
     hx-swap="none"
-    class="w-full flex flex-wrap gap-2">
+    class="w-full flex flex-wrap gap-2"
+  >
     <textarea
         name="body"
         class="w-full p-2 rounded border border-gray-200"
-        placeholder="Add to the discussion..."></textarea>
+        placeholder="Add to the discussion..."></textarea
+    >
     <button type="submit" class="btn flex items-center gap-2">
-      {{ i "message-square" "w-4 h-4" }} comment
+        {{ i "message-square" "w-4 h-4" }}
+        <span>comment</span>
+        <span id="create-comment-spinner" class="group">
+          {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+        </span>
     </button>
-    <button 
-      type="button" 
-      class="btn flex items-center gap-2" 
+    <button
+      type="button"
+      class="btn flex items-center gap-2 group"
       hx-get="/{{ .RepoInfo.FullName }}/pulls/{{ .Pull.PullId }}/round/{{ .RoundNumber }}/actions"
       hx-swap="outerHTML"
-      hx-target="#pull-comment-card-{{ .RoundNumber }}">
+      hx-target="#pull-comment-card-{{ .RoundNumber }}"
+    >
       {{ i "x" "w-4 h-4" }}
       <span>cancel</span>
+      {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
     </button>
     <div id="pull-comment"></div>
   </form>

appview/pages/templates/repo/pulls/fragments/pullResubmit.html

···
         <form 
           hx-post="/{{ .RepoInfo.FullName }}/pulls/{{ .Pull.PullId }}/resubmit" 
           hx-swap="none"
-          class="w-full flex flex-wrap gap-2">
+          class="w-full flex flex-wrap gap-2"
+          hx-indicator="#resubmit-spinner"
+        >
           <textarea
             name="patch"
             class="w-full p-2 mb-2"
             placeholder="Paste your updated patch here."
             rows="15"
-            >{{.Pull.LatestPatch}}</textarea>
+          >
+            {{.Pull.LatestPatch}}
+          </textarea>
           <button
               type="submit"
               class="btn flex items-center gap-2"
               {{ if or .Pull.State.IsClosed }}
               disabled
-              {{ end }}>
+              {{ end }}
+          >
             {{ i "rotate-ccw" "w-4 h-4" }}
             <span>resubmit</span>
+            <span id="resubmit-spinner" class="group">
+              {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+            </span>
           </button>
-          <button 
-            type="button" 
-            class="btn flex items-center gap-2" 
+          <button
+            type="button"
+            class="btn flex items-center gap-2"
             hx-get="/{{ .RepoInfo.FullName }}/pulls/{{ .Pull.PullId }}/round/{{ .Pull.LastRoundNumber }}/actions"
             hx-swap="outerHTML"
-            hx-target="#resubmit-pull-card">
+            hx-target="#resubmit-pull-card"
+            hx-indicator="#cancel-resubmit-spinner"
+          >
             {{ i "x" "w-4 h-4" }}
             <span>cancel</span>
+            <span id="cancel-resubmit-spinner" class="group">
+              {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+            </span>
           </button>
         </form>
 

appview/pages/templates/repo/pulls/new.html

···
     <form
         hx-post="/{{ .RepoInfo.FullName }}/pulls/new"
         class="mt-6 space-y-6"
+        hx-indicator="#create-pull-spinner"
         hx-swap="none"
     >
         <div class="flex flex-col gap-4">
···
                 <button type="submit" class="btn flex items-center gap-2">
                     {{ i "git-pull-request-create" "w-4 h-4" }}
                     create pull
+                    <span id="create-pull-spinner" class="group">
+                      {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+                    </span>
                 </button>
             </div>
         </div>

appview/pages/templates/repo/settings.html

···
     </div>
 
     {{ if .RepoInfo.Roles.CollaboratorInviteAllowed }}
-        <form hx-put="/{{ $.RepoInfo.FullName }}/settings/collaborator">
-            <label for="collaborator" class="dark:text-white"
-                >add collaborator</label
-            >
+        <form
+            hx-put="/{{ $.RepoInfo.FullName }}/settings/collaborator"
+            class="group"
+        >
+            <label for="collaborator" class="dark:text-white">
+                add collaborator
+            </label>
             <input
                 type="text"
                 id="collaborator"
···
                 required
                 class="dark:bg-gray-700 dark:text-white"
                 placeholder="enter did or handle"
-            />
+            >
             <button
-                class="btn my-2 dark:text-white dark:hover:bg-gray-700"
+                class="btn my-2 flex gap-2 items-center dark:text-white dark:hover:bg-gray-700"
                 type="text"
             >
-                add
+                <span>add</span>
+                {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
             </button>
         </form>
     {{ end }}
 
-    <form hx-put="/{{ $.RepoInfo.FullName }}/settings/branches/default" class="mt-6">
+    <form
+        hx-put="/{{ $.RepoInfo.FullName }}/settings/branches/default"
+        class="mt-6 group"
+    >
         <label for="branch">default branch</label>
-        <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">
-            {{ range .Branches }}
-                <option
-                    value="{{ . }}"
-                    class="py-1"
-                    {{ if eq . $.DefaultBranch }}
-                        selected
-                    {{ end }}
-                >
-                    {{ . }}
-                </option>
-            {{ end }}
-        </select>
-        <button class="btn my-2" type="text">save</button>
+        <div class="flex gap-2 items-center">
+            <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">
+                {{ range .Branches }}
+                    <option
+                        value="{{ . }}"
+                        class="py-1"
+                        {{ if eq . $.DefaultBranch }}
+                            selected
+                        {{ end }}
+                    >
+                        {{ . }}
+                    </option>
+                {{ end }}
+            </select>
+            <button class="btn my-2 flex gap-2 items-center" type="text">
+                <span>save</span>
+                {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+            </button>
+        </div>
     </form>
 
     {{ if .RepoInfo.Roles.RepoDeleteAllowed }}
-    <form hx-confirm="Are you sure you want to delete this repository?" hx-delete="/{{ $.RepoInfo.FullName }}/settings/delete" class="mt-6">
+    <form
+        hx-confirm="Are you sure you want to delete this repository?"
+        hx-delete="/{{ $.RepoInfo.FullName }}/settings/delete"
+        class="mt-6"
+        hx-indicator="#delete-repo-spinner"
+    >
         <label for="branch">delete repository</label>
-        <button class="btn my-2" type="text">delete</button>
+        <button class="btn my-2 flex gap-2 items-center" type="text">
+            <span>delete</span>
+            <span id="delete-repo-spinner" class="group">
+              {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+            </span>
+        </button>
         <span>
           Deleting a repository is irreversible and permanent.
         </span>

appview/pages/templates/settings.html

···
         </div>
       </div>
       <button
-        class="btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 gap-2"
+        class="btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 gap-2 group"
         title="Delete key"
         hx-delete="/settings/keys?name={{urlquery .Name}}&rkey={{urlquery .Rkey}}&key={{urlquery .Key}}"
-        hx-confirm="Are you sure you want to delete the key '{{ .Name }}'?">
+        hx-confirm="Are you sure you want to delete the key '{{ .Name }}'?"
+      >
         {{ i "trash-2" "w-5 h-5" }}
         <span class="hidden md:inline">delete</span> 
+        {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
       </button>
     </div>
     {{ end }}
   </div>
   <form
       hx-put="/settings/keys"
+      hx-indicator="#add-sshkey-spinner"
       hx-swap="none"
       class="max-w-2xl mb-8 space-y-4"
       >
···
           required
           class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"/>
 
-      <button class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600" type="submit">add key</button>
+      <button class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 flex gap-2 items-center" type="submit">
+          <span>add key</span>
+          <span id="add-sshkey-spinner" class="group">
+            {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+          </span>
+      </button>
 
       <div id="settings-keys" class="error dark:text-red-400"></div>
   </form>
···
         </a>
         {{ end }}
         {{ if not .Primary }}
-        <form hx-delete="/settings/emails" hx-confirm="Are you sure you wish to delete the email '{{ .Address }}'?">
+        <form
+          hx-delete="/settings/emails"
+          hx-confirm="Are you sure you wish to delete the email '{{ .Address }}'?"
+          hx-indicator="#delete-email-{{ .Address }}-spinner"
+        >
           <input type="hidden" name="email" value="{{ .Address }}">
           <button
-            class="btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
+            class="btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 flex gap-2 items-center"
             title="Delete email"
-            type="submit">
+            type="submit"
+          >
             {{ i "trash-2" "w-5 h-5" }}
             <span class="hidden md:inline">delete</span> 
+            <span id="delete-email-{{ .Address }}-spinner" class="group">
+              {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+            </span>
           </button>
         </form>
         {{ end }}
···
       hx-put="/settings/emails"
       hx-swap="none"
       class="max-w-2xl mb-8 space-y-4"
+      hx-indicator="#add-email-spinner"
       >
       <input
           type="email"
···
           name="email"
           placeholder="[e-mail]"
           required
-          class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"/>
+          class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"
+      >
 
-      <button class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600" type="submit">add email</button>
+      <button
+        class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 flex gap-2 items-center"
+        type="submit"
+      >
+        <span>add email</span>
+        <span id="add-email-spinner" class="group">
+          {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+        </span>
+      </button>
 
       <div id="settings-emails-error" class="error dark:text-red-400"></div>
       <div id="settings-emails-success" class="success dark:text-green-400"></div>
-
   </form>
 </section>
-{{ end }}
+{{ end }}

appview/pages/templates/user/fragments/follow.html

···
 {{ define "user/fragments/follow" }}
   <button id="followBtn"
-    class="btn mt-2 w-full"
+    class="btn mt-2 w-full flex gap-2 items-center group"
 
     {{ if eq .FollowStatus.String "IsNotFollowing" }}
     hx-post="/follow?subject={{.UserDid}}"
···
     hx-swap="outerHTML"
     >
     {{ if eq .FollowStatus.String "IsNotFollowing" }}Follow{{ else }}Unfollow{{ end }}
+    {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
   </button>
 {{ end }}