Merge pull request #8555 from jimchamp/feedback-on-modify-list

Add visual feedback when updating list via My Books Droppers
internetarchive · Nov 22, 2023 · a3a6529 · a3a6529
2 parents baad3d8 + 0c082d6
commit a3a6529
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 7 deletions.
diff --git a/openlibrary/plugins/openlibrary/js/my-books/MyBooksDropper/ReadingLists.js b/openlibrary/plugins/openlibrary/js/my-books/MyBooksDropper/ReadingLists.js
@@ -6,6 +6,7 @@ import myBooksStore from '../store'
 
 import { addItem, removeItem } from '../../lists/ListService'
 import { attachNewActiveShowcaseItem, toggleActiveShowcaseItems } from '../../lists/ShowcaseItem'
+import { FadingToast } from '../../Toast'
 
 const DEFAULT_COVER_URL = '/images/icons/avatar_book-sm.png'
 
@@ -218,9 +219,16 @@ export class ReadingLists {
         }
 
         const makeChange = isAddingItem ? addItem : removeItem
+        this.patronLists[listKey].dropperListAffordance.classList.remove('list--active')
+        this.patronLists[listKey].dropperListAffordance.classList.add('list--pending')
 
         await makeChange(listKey, seed)
-            .then(response => response.json())
+            .then((response) => {
+                if (response.status >= 400) {
+                    throw new Error('List update failed')
+                }
+                response.json()
+            })
             .then(() => {
                 this.updateViewAfterModifyingList(listKey, isWork, isAddingItem)
 
@@ -238,6 +246,14 @@ export class ReadingLists {
                     }
                 }
             })
+            .catch(() => {
+                if (!isAddingItem) {
+                    // Replace check mark if patron was removing an item from a list
+                    this.patronLists[listKey].dropperListAffordance.classList.add('list--active')
+                }
+                new FadingToast('Could not update list.  Please try again later.').show()
+            })
+            .finally(() => this.patronLists[listKey].dropperListAffordance.classList.remove('list--pending'))
     }
 
     /**
@@ -317,7 +333,7 @@ export class ReadingLists {
      * @returns {HTMLElement} Reference to the newly created element
      */
     createDropdownListAffordance(listKey, listTitle, isActive) {
-        const itemMarkUp = `<span class="check">✔️</span>
+        const itemMarkUp = `<span class="list__status-indicator"></span>
         <a href="${listKey}" class="modify-list dropper__close" data-list-cover-url="${listKey}" data-list-key="${listKey}">${listTitle}</a>
         `
         const p = document.createElement('p')

diff --git a/openlibrary/templates/lists/dropper_lists.html b/openlibrary/templates/lists/dropper_lists.html
@@ -3,6 +3,6 @@
 $for list in lists:
   $ list_active = "list--active" if list['active'] else ""
   <p class="list $list_active">
-    <span class="check">✔️</span>
+    <span class="list__status-indicator"></span>
     <a href="$list.key" class="modify-list" data-list-cover-url="$list.cover_url" data-list-key="$list.key" data-list-items="$(json_encode(list.list_items))">$list.name</a>
   </p>
diff --git a/static/css/components/mybooks-dropper.less b/static/css/components/mybooks-dropper.less
@@ -117,17 +117,42 @@
         display: flex;
         margin-top: 0;
 
-        .check {
+        .list__status-indicator {
           margin-right: 8px;
-          visibility: hidden;
+          min-width: 13px;
         }
       }
 
-      .list--active .check {
-        visibility: visible;
+      .list--active .list__status-indicator::after {
+        content: "✔️";
+      }
+      .list--pending .list__status-indicator {
+        display: inline-block;
+
+        &::after {
+          content: "";
+          display: block;
+          margin-top: 4px;
+          width: 1em;
+          height: 1em;
+          border-radius: 50%;
+          border: 1px solid @black;
+          border-color: @black transparent;
+          animation: spin 1.2s linear infinite;
+        }
       }
       /* stylelint-enable max-nesting-depth */
       /* stylelint-enable selector-max-specificity */
     }
   }
 }
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}