forked from tangled.org/core
Monorepo for Tangled — https://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

Changed files
+172 -63
appview
+11 -5
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>
+2 -1
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"
+2 -1
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 }}
+27 -6
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>`;
}
}
}
+7 -1
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>
+16 -7
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>
+20 -7
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>
+4
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>
+46 -24
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>
+35 -10
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="your@email.com"
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 }}
+2 -1
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 }}