diff --git a/CHANGES.md b/CHANGES.md index 2a85cf93..1ef9e058 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -5,7 +5,7 @@ The following changes are not yet released, but are code complete: Features: - - None yet + - Improve the user experience of the file account button by applying a custom cursor and adding a loading spinner next to it while the extension load the PDF document ([392](https://github.com/freelawproject/recap-chrome/pull/392)). Changes: - None yet diff --git a/src/action_button.js b/src/action_button.js index e4899f08..28a64847 100644 --- a/src/action_button.js +++ b/src/action_button.js @@ -98,10 +98,7 @@ const recapActionsButton = (court, pacerCaseId) => { mainDiv.classList.add('btn-group'); mainDiv.setAttribute('id', 'recap-action-button'); - const spinner = document.createElement('i'); - spinner.classList.add('fa', 'fa-spinner', 'fa-spin'); - spinner.setAttribute('id', 'recap-button-spinner'); - spinner.classList.add('recap-btn-spinner-hidden'); + const spinner = createRecapSpinner(); const mainButton = document.createElement('a'); mainButton.classList.add('btn', 'btn-primary', 'dropdown-toggle'); diff --git a/src/appellate/appellate.js b/src/appellate/appellate.js index 33316da3..8c3e0a1d 100644 --- a/src/appellate/appellate.js +++ b/src/appellate/appellate.js @@ -1038,15 +1038,22 @@ AppellateDelegate.prototype.handleSingleDocumentPageView = async function () { let button = createRecapButtonForFilers( 'Accept Charges and RECAP Document' ); + let spinner = createRecapSpinner(); button.addEventListener('click', (event) => { event.preventDefault(); let form = event.target.parentNode; form.id = 'form' + new Date().getTime(); + + let spinner = document.getElementById('recap-button-spinner'); + if (spinner) spinner.classList.remove('recap-btn-spinner-hidden'); + window.postMessage({ id: form.id }, '*'); }); let form = document.querySelector('form'); form.append(button); + form.append(document.createTextNode('\u00A0')); + form.append(spinner); } else { await overwriteFormSubmitMethod(); } diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 54bb15c8..2ce59c36 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -571,6 +571,7 @@ footer #version { } .recap-bttn-for-filers { + cursor: pointer; margin-left: 5px; border-radius: 3px; border-style: solid; diff --git a/src/content_delegate.js b/src/content_delegate.js index 826aac9c..d6432ce9 100644 --- a/src/content_delegate.js +++ b/src/content_delegate.js @@ -539,6 +539,7 @@ ContentDelegate.prototype.handleSingleDocumentPageView = async function () { // Create a new button for filers accounts and add onclick // event listener to intercept navigation to the PDF document let button = createRecapButtonForFilers('View and RECAP Document'); + let spinner = createRecapSpinner(); button.addEventListener('click', async (event) => { // Get the button element that was actually clicked (event.target) let button = event.target; @@ -547,11 +548,16 @@ ContentDelegate.prototype.handleSingleDocumentPageView = async function () { // service. This attribute indicates that the user specifically clicked // this custom button, triggering the upload process. button.setAttribute('clicked',''); + let spinner = document.getElementById('recap-button-spinner'); + if (spinner) spinner.classList.remove('recap-btn-spinner-hidden'); + return true; }); // add the new button inside the form let form = document.querySelector('form'); form.append(button); + form.append(document.createTextNode('\u00A0')); + form.append(spinner); } await overwriteFormSubmitMethod(); @@ -694,9 +700,7 @@ ContentDelegate.prototype.onDownloadAllSubmit = async function (event) { loadingMessageWrapper.setAttribute('id', 'loading-message'); loadingMessageWrapper.style.textAlign = 'center'; - const spinner = document.createElement('i'); - spinner.classList.add('fa', 'fa-spinner', 'fa-spin'); - spinner.setAttribute('id', 'recap-button-spinner'); + const spinner = createRecapSpinner(false); let spanText = document.createElement('span'); spanText.style.fontFamily = 'helvetica,arial,serif'; diff --git a/src/utils.js b/src/utils.js index 0cd0d37f..080bfc23 100644 --- a/src/utils.js +++ b/src/utils.js @@ -338,3 +338,19 @@ function createRecapButtonForFilers(description) { button.classList.add('recap-bttn-for-filers', 'btn-primary'); return button; } + +// Creates a spinner element to be used in the recap button. +// +// **Arguments:** +// - `hidden` (bool): Whether the spinner should be initially hidden. +// +// **Returns:** +// - The created spinner element. +function createRecapSpinner(hidden = true) { + const spinner = document.createElement('i'); + spinner.classList.add('fa', 'fa-spinner', 'fa-spin'); + spinner.setAttribute('id', 'recap-button-spinner'); + if (hidden) spinner.classList.add('recap-btn-spinner-hidden'); + + return spinner; +}