Merge pull request #392 from freelawproject/feat-add-spinner-to-view-…

…and-recap-btn

feat(spinner): Adds spinner next to the custom button for filer accounts

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

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');

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();
   }

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;

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';

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;
+}