Spinner indicators for Download Content buttons.

Defacto2 · Sep 24, 2024 · 6dc40a6 · 6dc40a6
1 parent f7bc0b8
commit 6dc40a6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/handler/app/internal/filerecord/filerecord.go b/handler/app/internal/filerecord/filerecord.go
@@ -150,6 +150,7 @@ func previewcopy(uniqueID, name string) string {
 	return `<div class="col col-1 text-end" ` +
 		`data-bs-toggle="tooltip" data-bs-title="Use image for preview">` +
 		fmt.Sprintf(`<a class="icon-link align-text-bottom" name="artifact-editor-comp-previewcopy" `+
+			`hx-indicator="#artifact-editor-comp-htmx-indicator" `+
 			`hx-target="#artifact-editor-comp-feedback" `+
 			`hx-patch="/editor/preview/copy/%s/%s">`, uniqueID, name) +
 		`<svg width="16" height="16" fill="currentColor" aria-hidden="true">` +
@@ -164,6 +165,7 @@ func readmepreview(uniqueID, name, platform string) string {
 	return `<div class="col col-1 text-end" ` +
 		`data-bs-toggle="tooltip" data-bs-title="Use file for preview">` +
 		fmt.Sprintf(`<a class="icon-link align-text-bottom" name="artifact-editor-comp-previewtext" `+
+			`hx-indicator="#artifact-editor-comp-htmx-indicator" `+
 			`hx-target="#artifact-editor-comp-feedback" `+
 			`hx-patch="/editor/readme/%s/%s/%s">`, uri, uniqueID, name) +
 		`<svg width="16" height="16" fill="currentColor" aria-hidden="true">` +
@@ -174,6 +176,7 @@ func readmecopy(uniqueID, name string) string {
 	return `<div class="col col-1 text-end" ` +
 		`data-bs-toggle="tooltip" data-bs-title="Use file as readme">` +
 		fmt.Sprintf(`<a class="icon-link align-text-bottom" name="artifact-editor-comp-textcopy" `+
+			`hx-indicator="#artifact-editor-comp-htmx-indicator" `+
 			`hx-target="#artifact-editor-comp-feedback" `+
 			`hx-patch="/editor/readme/copy/%s/%s">`, uniqueID, name) +
 		`<svg class="bi" width="16" height="16" fill="currentColor" aria-hidden="true">` +

diff --git a/view/app/artifactfile.tmpl b/view/app/artifactfile.tmpl
@@ -143,7 +143,12 @@
             {{- else}}
             <div class="input-group mb-3">
               <button type="button" class="btn btn-secondary w-25" id="artifact-editor-templocation-label"
-                data-bs-toggle="tooltip" data-bs-title="Copy the path">Temp location</button>
+                data-bs-toggle="tooltip" data-bs-title="Copy the path">
+                <span role="status">Location</span>
+                <span id="artifact-editor-comp-htmx-indicator" class="htmx-indicator spinner-border spinner-border-sm" role="status">
+                  <span class="visually-hidden">Loading...</span>
+                </span>
+              </button>
               <input type="text" class="form-control" name="artifact-editor-templocation" id="artifact-editor-templocation" 
                 aria-describedby="artifact-editor-templocation-label" value="{{$modDecompressLoc}}" readonly>
             </div>