chore(themes): remove loader.gif and convert remaining consumers to the CSS spinner (#8812)

#button-update-loading and the generic .loading class (used by
#first_load) painted loader.gif as a background. Both now use the
#load_more.loading::after border-rotation spinner from #8804. The
unused #slider-content .loader rule is also removed. Drops the
--frss-loading-image variable, all twelve loader.gif files, and
references in the theme contribution docs.

Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>

docs/en/contributing.md

@@ -65,7 +65,7 @@ Check the [basic information for creating a new theme](./developers/04_Frontend/
 
 This checklist is designed to ensure high-quality system themes while minimizing maintenance efforts.
 
-* Essential files include: [metadata.json, loader.gif, original.png](./developers/04_Frontend/02_Design.md) (located in the `thumbs` directory).
+* Essential files include: [metadata.json, original.png](./developers/04_Frontend/02_Design.md) (located in the `thumbs` directory).
 * Include _frss.css in the "files" section of [`metadata.json`](./developers/04_Frontend/02_Design.md).
 * Theme-specific icons reside in the `icons` directory.
 	* Icons should be provided as `svg` files.

docs/en/developers/04_Frontend/02_Design.md

@@ -7,7 +7,6 @@
 The easiest way to create a theme is by copying and modifying the base theme (or another of the pre-installed themes). The base theme can be found in [/p/themes/base-theme](https://github.com/FreshRSS/FreshRSS/tree/edge/p/themes/base-theme). Each Theme requires:
 
 - a `metadata.json` file to describe the theme
-- a `loader.gif` file to use as a loading icon
 - an (optional) `icons` folder containing .svg (for icons), .ico (for favicons), and .png (for special cases) files to override existing icons
 - a `thumbs` folder containing a file, `original.png` that will be used as the preview for the theme
 

p/themes/base-theme/frss.css

@@ -39,8 +39,6 @@
 	--frss-scrollbar-track: #0001;
 	--frss-scrollbar-track-hover: #0001;
 
-	--frss-loading-image: url("loader.gif");
-
 	--frss-padding-flux-items: 0.75rem;
 	--frss-padding-top-bottom: 0.5rem;
 
@@ -619,8 +617,7 @@ button[disabled]:hover, input[disabled]:hover {
 }
 
 #button-update-loading {
-	background: var(--frss-loading-image) 0.5rem center no-repeat;
-	background-size: 1rem;
+	position: relative;
 	padding-left: 2rem;
 }
 
@@ -1977,13 +1974,11 @@ a.website:hover .favicon {
 	font-size: 0;
 }
 
-#load_more.loading::after {
+#load_more.loading::after,
+#button-update-loading::after,
+.loading::after {
 	content: "";
 	position: absolute;
-	top: calc(50% - 12px);
-	left: calc(50% - 12px);
-	width: 24px;
-	height: 24px;
 	border: 3px solid currentColor;
 	border-right-color: transparent;
 	border-radius: 50%;
@@ -1991,16 +1986,34 @@ a.website:hover .favicon {
 	animation: frss-spin 1s linear infinite;
 }
 
+#load_more.loading::after,
+.loading::after {
+	top: calc(50% - 12px);
+	left: calc(50% - 12px);
+	width: 24px;
+	height: 24px;
+}
+
+#button-update-loading::after {
+	top: calc(50% - 0.5rem);
+	left: 0.5rem;
+	width: 1rem;
+	height: 1rem;
+	border-width: 2px;
+}
+
 @keyframes frss-spin {
 	to { transform: rotate(360deg); }
 }
 
 @media (prefers-reduced-motion: reduce) {
-	#load_more.loading::after { animation: none; }
+	#load_more.loading::after,
+	#button-update-loading::after,
+	.loading::after { animation: none; }
 }
 
 .loading {
-	background: var(--frss-loading-image) center center no-repeat;
+	position: relative;
 	font-size: 0;
 }
 
@@ -2137,13 +2150,6 @@ html.slider-active {
 	filter: grayscale(100%) brightness(2.5);
 }
 
-#slider-content .loader {
-	height: 90vh;
-	background-image: url('loader.gif');
-	background-repeat: no-repeat;
-	background-position: center;
-}
-
 /*=== Configuration pages */
 .post {
 	padding: 1rem 2rem;

p/themes/base-theme/frss.rtl.css

@@ -39,8 +39,6 @@
 	--frss-scrollbar-track: #0001;
 	--frss-scrollbar-track-hover: #0001;
 
-	--frss-loading-image: url("loader.gif");
-
 	--frss-padding-flux-items: 0.75rem;
 	--frss-padding-top-bottom: 0.5rem;
 
@@ -619,8 +617,7 @@ button[disabled]:hover, input[disabled]:hover {
 }
 
 #button-update-loading {
-	background: var(--frss-loading-image) 0.5rem center no-repeat;
-	background-size: 1rem;
+	position: relative;
 	padding-right: 2rem;
 }
 
@@ -1977,13 +1974,11 @@ a.website:hover .favicon {
 	font-size: 0;
 }
 
-#load_more.loading::after {
+#load_more.loading::after,
+#button-update-loading::after,
+.loading::after {
 	content: "";
 	position: absolute;
-	top: calc(50% - 12px);
-	right: calc(50% - 12px);
-	width: 24px;
-	height: 24px;
 	border: 3px solid currentColor;
 	border-left-color: transparent;
 	border-radius: 50%;
@@ -1991,16 +1986,34 @@ a.website:hover .favicon {
 	animation: frss-spin 1s linear infinite;
 }
 
+#load_more.loading::after,
+.loading::after {
+	top: calc(50% - 12px);
+	right: calc(50% - 12px);
+	width: 24px;
+	height: 24px;
+}
+
+#button-update-loading::after {
+	top: calc(50% - 0.5rem);
+	right: 0.5rem;
+	width: 1rem;
+	height: 1rem;
+	border-width: 2px;
+}
+
 @keyframes frss-spin {
 	to { transform: rotate(-360deg); }
 }
 
 @media (prefers-reduced-motion: reduce) {
-	#load_more.loading::after { animation: none; }
+	#load_more.loading::after,
+	#button-update-loading::after,
+	.loading::after { animation: none; }
 }
 
 .loading {
-	background: var(--frss-loading-image) center center no-repeat;
+	position: relative;
 	font-size: 0;
 }
 
@@ -2137,13 +2150,6 @@ html.slider-active {
 	filter: grayscale(100%) brightness(2.5);
 }
 
-#slider-content .loader {
-	height: 90vh;
-	background-image: url('loader.gif');
-	background-repeat: no-repeat;
-	background-position: center;
-}
-
 /*=== Configuration pages */
 .post {
 	padding: 1rem 2rem;