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>

7 files changed, 57 insertions, 0 deletions

diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index fa0b45dec..7b8af5f41 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -274,6 +274,18 @@ th {
 	box-shadow: none;
 }
 
+.spinner {
+	filter: invert(1);
+}
+
+a:hover > .spinner {
+	filter: invert(1) brightness(2);
+}
+
+.flux .item.manage .read:hover .icon.spinner {
+	filter: invert(1) grayscale(0.8) brightness(1.7);
+}
+
 /*=== switches */
 .switch.active {
 	background-color: var(--contrast-background-color);
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 5cabd1f24..147d05fcf 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -274,6 +274,18 @@ th {
 	box-shadow: none;
 }
 
+.spinner {
+	filter: invert(1);
+}
+
+a:hover > .spinner {
+	filter: invert(1) brightness(2);
+}
+
+.flux .item.manage .read:hover .icon.spinner {
+	filter: invert(1) grayscale(0.8) brightness(1.7);
+}
+
 /*=== switches */
 .switch.active {
 	background-color: var(--contrast-background-color);
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 412ff9cd4..b2ddf8f2b 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -118,6 +118,18 @@ p.help .icon,
 	filter: brightness(.6) contrast(1.2);
 }
 
+.spinner {
+	filter: invert(1) brightness(.6) contrast(1.2);
+}
+
+.bookmark:hover > .spinner {
+	filter: invert(1) brightness(1.1);
+}
+
+a:hover .icon.spinner {
+	filter: invert(1) brightness(1.5);
+}
+
 /*=== Forms */
 legend {
 	border-bottom: 1px solid var(--dark-border-color);
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index aead74393..4656ca241 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -118,6 +118,18 @@ p.help .icon,
 	filter: brightness(.6) contrast(1.2);
 }
 
+.spinner {
+	filter: invert(1) brightness(.6) contrast(1.2);
+}
+
+.bookmark:hover > .spinner {
+	filter: invert(1) brightness(1.1);
+}
+
+a:hover .icon.spinner {
+	filter: invert(1) brightness(1.5);
+}
+
 /*=== Forms */
 legend {
 	border-bottom: 1px solid var(--dark-border-color);
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 8f405ea19..5c658345c 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -1323,4 +1323,8 @@ a:hover .icon {
 	:root.darkMode_auto .btn:active .icon {
 		filter: brightness(1.4);
 	}
+
+	:root.darkMode_auto .spinner {
+		filter: invert(1) brightness(2);
+	}
 }
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 4f5f3bc45..417a9003c 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -1323,4 +1323,8 @@ a:hover .icon {
 	:root.darkMode_auto .btn:active .icon {
 		filter: brightness(1.4);
 	}
+
+	:root.darkMode_auto .spinner {
+		filter: invert(1) brightness(2);
+	}
 }
diff --git a/p/themes/icons/spinner.svg b/p/themes/icons/spinner.svg
new file mode 100644
index 000000000..772d0c39f
--- /dev/null
+++ b/p/themes/icons/spinner.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><style>@keyframes spinner_svv2{to{transform:rotate(360deg)}}</style><path d="M10.14 1.16a11 11 0 0 0-9 8.92A1.59 1.59 0 0 0 2.46 12a1.52 1.52 0 0 0 1.65-1.3 8 8 0 0 1 6.66-6.61A1.42 1.42 0 0 0 12 2.69a1.57 1.57 0 0 0-1.86-1.53Z" style="transform-origin:center;animation:spinner_svv2 .75s infinite linear"/></svg>
\ No newline at end of file