diff options
| author |  Inverle <inverle@proton.me>
| 2025-05-10 21:06:58 +0200 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2025-05-10 21:06:58 +0200 |
| commit | 84d4aeb9e613a70b53d87c62d07bb4c4635290c3 (patch) | |
| tree | 31c5144a7b40df5cefceb732abd7fe318dddc6d1 /p/scripts | |
| parent | 5f74634c8324affda1ceec0b81fc50021775c6e3 (diff) | |
Implement loading spinner for marking as favorite/read, read/unread (#7564)
* Implement loading spinner for marking as favorite
* Ensure that the correct previous icon gets set
* Remove delay
* Improve compatibility with various parsers
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>
* Support multiple icons (top, bottom)
* Remove preload for now
* Fix CSS, remove !important
* Implement read/unread and alt
* Ensure correct bookmark icon gets set after error
---------
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>
Diffstat (limited to 'p/scripts')
| -rw-r--r-- | p/scripts/main.js | 26 |
1 files changed, 26 insertions, 0 deletions
diff --git a/p/scripts/main.js b/p/scripts/main.js index 73ac27ddd..c0e31ef98 100644 --- a/p/scripts/main.js +++ b/p/scripts/main.js @@ -224,6 +224,10 @@ function send_mark_read_queue(queue, asRead, callback) { req.responseType = 'json'; req.onerror = function (e) { for (let i = queue.length - 1; i >= 0; i--) { + const div = document.getElementById('flux_' + queue[i]); + div.querySelectorAll('a.read > .icon').forEach(icon => { + icon.outerHTML = div.classList.contains('not_read') ? context.icons.unread : context.icons.read; + }); delete pending_entries['flux_' + queue[i]]; } badAjax(this.status == 403); @@ -315,6 +319,12 @@ function mark_read(div, only_not_read, asBatch) { } pending_entries[div.id] = true; + div.querySelectorAll('a.read > .icon').forEach(icon => { + icon.src = context.icons.spinner; + icon.alt = '⏳'; + icon.classList.add('spinner'); + }); + const asRead = div.classList.contains('not_read'); const entryId = div.id.replace(/^flux_/, ''); if (asRead && asBatch) { @@ -351,10 +361,26 @@ function mark_favorite(div) { } pending_entries[div.id] = true; + let originalIcon; + + div.querySelectorAll('a.bookmark > .icon').forEach(icon => { + originalIcon = { + src: icon.getAttribute('src'), + alt: icon.getAttribute('alt') + }; + icon.src = context.icons.spinner; + icon.alt = '⏳'; + icon.classList.add('spinner'); + }); + const req = new XMLHttpRequest(); req.open('POST', url, true); req.responseType = 'json'; req.onerror = function (e) { + div.querySelectorAll('a.bookmark > .icon').forEach(icon => { + icon.src = originalIcon.src; + icon.alt = originalIcon.alt; + }); delete pending_entries[div.id]; badAjax(this.status == 403); }; |