From f2fc2dcfc9305a42242421c718ee3673bd1c851c Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 17 Mar 2024 11:04:59 +0100 Subject: [PATCH] Load citation JS only when needed (#29855) Previously, the citation js would load every time when opening a citable repo. Now it only loads when the user clicks the button for it. The loading state is representend with a spinner on the button: Screenshot 2024-03-17 at 00 25 13 Diff ist best viewed with whitespace hidden. --------- Co-authored-by: Giteabot (cherry picked from commit 4b1c88628a6856e533ff10d346ca5bd73ce952b3) --- web_src/css/modules/animations.css | 4 +++ web_src/js/features/citation.js | 45 +++++++++++++++++------------- 2 files changed, 30 insertions(+), 19 deletions(-) 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'); }); }