From 84d4aeb9e613a70b53d87c62d07bb4c4635290c3 Mon Sep 17 00:00:00 2001
From: Inverle <inverle@proton.me>
Date: Sat, 10 May 2025 21:06:58 +0200
Subject: 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>
---
 p/scripts/main.js | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

(limited to 'p/scripts/main.js')

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);
 	};
-- 
cgit v1.2.3