fix

web_src/js/features/repo-common.js

@@ -1,44 +1,42 @@
 import $ from 'jquery';
-import {hideElem, showElem} from '../utils/dom.js';
+import {hideElem, queryElems, showElem} from '../utils/dom.js';
 import {POST} from '../modules/fetch.js';
+import {showErrorToast} from '../modules/toast.js';
 
-async function getArchive($target, url, first) {
-  const dropdownBtn = $target[0].closest('.ui.dropdown.button') ?? $target[0].closest('.ui.dropdown.btn');
-
+async function downloadArchive(target, url, retryCount = 0) {
+  // there are many places using the "archive-link", eg: the dropdown on the repo code page, the release list
+  const targetLoading = target.closest('.ui.dropdown') ?? target;
+  let keepLoading = false;
   try {
-    dropdownBtn.classList.add('is-loading');
+    targetLoading.classList.add('is-loading', 'loading-icon-2px');
     const response = await POST(url);
-    if (response.status === 200) {
-      const data = await response.json();
-      if (!data) {
-        // XXX Shouldn't happen?
-        dropdownBtn.classList.remove('is-loading');
-        return;
-      }
-
-      if (!data.complete) {
-        // Wait for only three quarters of a second initially, in case it's
-        // quickly archived.
-        setTimeout(() => {
-          getArchive($target, url, false);
-        }, first ? 750 : 2000);
-      } else {
-        // We don't need to continue checking.
-        dropdownBtn.classList.remove('is-loading');
-        window.location.href = url;
-      }
+    if (!response.ok) {
+      throw new Error(`Invalid server response: ${response.status}`);
+    }
+    const data = await response.json();
+    if (!data.complete) {
+      keepLoading = true; // the archive is not ready yet, keep loading and then retry later
+      const delay = Math.min((retryCount + 1) * 750, 2000);
+      setTimeout(() => downloadArchive(target, url, retryCount + 1), delay);
+    } else {
+      window.location.href = url; // the archive is ready, start real downloading
     }
-  } catch {
-    dropdownBtn.classList.remove('is-loading');
+  } catch (e) {
+    console.error(e);
+    showErrorToast(`Failed to download the archive: ${e}`, {duration: 2500});
+  } finally {
+    if (!keepLoading) targetLoading.classList.remove('is-loading', 'loading-icon-2px');
   }
 }
 
 export function initRepoArchiveLinks() {
-  $('.archive-link').on('click', function (event) {
-    event.preventDefault();
-    const url = this.getAttribute('href');
-    if (!url) return;
-    getArchive($(event.target), url, true);
+  queryElems('.archive-link', (el) => {
+    el.addEventListener('click', (e) => {
+      const target = e.target.closest('.archive-link');
+      if (!target?.href) return;
+      e.preventDefault();
+      downloadArchive(target, target.href);
+    });
   });
 }
 

web_src/js/utils/dom.js

@@ -65,10 +65,14 @@ export function queryElemSiblings(el, selector = '*', fn) {
 }
 
 // it works like jQuery.children: only the direct children are selected
-export function queryElemChildren(parent, selector = '*', fn) {
+export function queryElemChildren(parent, selector, fn) {
   return applyElemsCallback(parent.querySelectorAll(`:scope > ${selector}`), fn);
 }
 
+export function queryElems(selector, fn) {
+  return applyElemsCallback(document.querySelectorAll(selector), fn);
+}
+
 export function onDomReady(cb) {
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', cb);