diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css index d5ddc772f6..5bfc090773 100644 --- a/web_src/css/modules/animations.css +++ b/web_src/css/modules/animations.css @@ -13,6 +13,10 @@ opacity: 0.3; } +.button.is-loading > * { + opacity: 0; +} + .is-loading::after { content: ""; position: absolute; diff --git a/web_src/js/features/citation.js b/web_src/js/features/citation.js index 61f378f0f2..49992b225f 100644 --- a/web_src/js/features/citation.js +++ b/web_src/js/features/citation.js @@ -40,28 +40,35 @@ export async function initCitationFileCopyContent() { $citationCopyApa.toggleClass('primary', !isBibtex); }; - try { - await initInputCitationValue($citationCopyApa, $citationCopyBibtex); - } catch (e) { - console.error(`initCitationFileCopyContent error: ${e}`, e); - return; - } - updateUi(); + $('#cite-repo-button').on('click', async (e) => { + const dropdownBtn = e.target.closest('.ui.dropdown.button'); + dropdownBtn.classList.add('is-loading'); - $citationCopyApa.on('click', () => { - localStorage.setItem('citation-copy-format', 'apa'); - updateUi(); - }); - $citationCopyBibtex.on('click', () => { - localStorage.setItem('citation-copy-format', 'bibtex'); - updateUi(); - }); + try { + try { + await initInputCitationValue($citationCopyApa, $citationCopyBibtex); + } catch (e) { + console.error(`initCitationFileCopyContent error: ${e}`, e); + return; + } + updateUi(); - $inputContent.on('click', () => { - $inputContent.trigger('select'); - }); + $citationCopyApa.on('click', () => { + localStorage.setItem('citation-copy-format', 'apa'); + updateUi(); + }); + $citationCopyBibtex.on('click', () => { + localStorage.setItem('citation-copy-format', 'bibtex'); + updateUi(); + }); + + $inputContent.on('click', () => { + $inputContent.trigger('select'); + }); + } finally { + dropdownBtn.classList.remove('is-loading'); + } - $('#cite-repo-button').on('click', () => { $('#cite-repo-modal').modal('show'); }); }