add multiple file download button component

app/javascript/elements/download_button.js

@@ -0,0 +1,38 @@
+import { target, targetable } from '@github/catalyst/lib/targetable'
+
+export default targetable(class extends HTMLElement {
+  static [target.static] = ['defaultButton', 'loadingButton']
+
+  connectedCallback () {
+    this.addEventListener('click', () => this.downloadFiles())
+  }
+
+  toggleState () {
+    this.defaultButton?.classList?.toggle('hidden')
+    this.loadingButton?.classList?.toggle('hidden')
+  }
+
+  downloadFiles () {
+    if (!this.dataset.src) return
+
+    this.toggleState()
+
+    fetch(this.dataset.src).then((response) => response.json()).then((urls) => {
+      urls.forEach((url) => {
+        fetch(url).then(async (resp) => {
+          const blobUrl = URL.createObjectURL(await resp.blob())
+          const link = document.createElement('a')
+
+          link.href = blobUrl
+          link.setAttribute('download', resp.headers.get('content-disposition').split('"')[1])
+
+          link.click()
+
+          URL.revokeObjectURL(url)
+        })
+      })
+    }).finally(() => {
+      this.toggleState()
+    })
+  }
+})

app/javascript/form.js

@@ -1,7 +1,9 @@
 import { createApp, reactive } from 'vue'
 
 import Form from './submission_form/form'
+import DownloadButton from './elements/download_button'
 
+window.customElements.define('download-button', DownloadButton)
 window.customElements.define('submission-form', class extends HTMLElement {
   connectedCallback () {
     this.appElem = document.createElement('div')

app/views/submit_form/completed.html.erb

@@ -29,7 +29,16 @@
     <div>
       <%= button_to button_title(title: 'Send copy to Email', disabled_with: 'Sending', icon: svg_icon('mail_forward', class: 'w-6 h-6')), send_submission_email_index_path, params: { submitter_slug: @submitter.slug }, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'base-button w-full' %>
       <div class="divider">OR</div>
-      <%= button_to button_title(title: 'Download documents', disabled_with: 'Downloading', icon: svg_icon('download', class: 'w-6 h-6')), submitter_download_index_path(@submitter.slug), method: :get, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'base-button w-full' %>
+      <download-button data-src="<%= submitter_download_index_path(@submitter.slug) %>" class="base-button w-full">
+        <span class="flex items-center justify-center space-x-2" data-target="download-button.defaultButton">
+          <%= svg_icon('download', class: 'w-6 h-6') %>
+          <span>Download documents</span>
+        </span>
+        <span class="flex items-center justify-center space-x-2 hidden" data-target="download-button.loadingButton">
+          <%= svg_icon('loader', class: 'w-6 h-6 animate-spin') %>
+          <span>Downloading</span>
+        </span>
+      </download-button>
     </div>
   </div>
 </div>