fix excessive CPU usage on linux chromium caused by animated SVG icons

js/Article.js

@@ -283,8 +283,8 @@ const Article = {
 			row.setAttribute("data-content", row.getAttribute("data-content-original"));
 			row.removeAttribute("data-content-original");
 
-			row.querySelector(".content-inner").innerHTML = `<div class="text-center">
+			row.querySelector(".content-inner").innerHTML = `<div class="text-center text-muted">
-				<img class="icon-unpack-pending" src="${App.getInitParam('icon_three_dots')}">
+				${__("Loading, please wait...")}
 			</div>`
 		}
 	},

js/Headlines.js

@@ -533,8 +533,8 @@ const Headlines = {
 						<div class="content" onclick="return Headlines.click(event, ${hl.id}, true);">
 							${Article.renderNote(hl.id, hl.note)}
 							<div class="content-inner" lang="${hl.lang ? hl.lang : 'en'}">
-								<div class="text-center">
+								<div class="text-center text-muted">
-									<img class="icon-unpack-pending" src="${App.getInitParam('icon_three_dots')}">
+									${__("Loading, please wait...")}
 								</div>
 							</div>
 							<div class="intermediate">
@@ -749,6 +749,9 @@ const Headlines = {
 					hsp.id = "headlines-spacer";
 				}
 
+				// clear out hsp contents in case there's a power-hungry svg icon rotating there
+				hsp.innerHTML = "";
+
 				dijit.byId('headlines-frame').domNode.appendChild(hsp);
 
 				this.initHeadlinesMenu();
@@ -800,6 +803,9 @@ const Headlines = {
 					hsp.id = "headlines-spacer";
 				}
 
+				// clear out hsp contents in case there's a power-hungry svg icon rotating there
+				hsp.innerHTML = "";
+
 				c.domNode.appendChild(hsp);
 
 				this.initHeadlinesMenu();

themes/compact.css

@@ -520,10 +520,10 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow {
   border: 1px solid transparent;
 }
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode {
-  opacity: 0;
+  display: none;
 }
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode.visible {
-  opacity: 1;
+  display: inline;
 }
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
   left: 2px;
@@ -1059,8 +1059,7 @@ body.ttrss_main .dijitDialog #feed_add_spinner {
   width: 18px;
   height: 18px;
 }
-body.ttrss_main .icon-three-dots,
+body.ttrss_main .icon-three-dots {
-.cdm .content-inner .icon-unpack-pending {
   width: 18px;
   height: 18px;
   vertical-align: middle;

themes/compact_night.css

@@ -520,10 +520,10 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow {
   border: 1px solid transparent;
 }
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode {
-  opacity: 0;
+  display: none;
 }
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode.visible {
-  opacity: 1;
+  display: inline;
 }
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
   left: 2px;
@@ -1059,8 +1059,7 @@ body.ttrss_main .dijitDialog #feed_add_spinner {
   width: 18px;
   height: 18px;
 }
-body.ttrss_main .icon-three-dots,
+body.ttrss_main .icon-three-dots {
-.cdm .content-inner .icon-unpack-pending {
   width: 18px;
   height: 18px;
   vertical-align: middle;

themes/light.css

@@ -520,10 +520,10 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow {
   border: 1px solid transparent;
 }
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode {
-  opacity: 0;
+  display: none;
 }
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode.visible {
-  opacity: 1;
+  display: inline;
 }
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
   left: 2px;
@@ -1059,8 +1059,7 @@ body.ttrss_main .dijitDialog #feed_add_spinner {
   width: 18px;
   height: 18px;
 }
-body.ttrss_main .icon-three-dots,
+body.ttrss_main .icon-three-dots {
-.cdm .content-inner .icon-unpack-pending {
   width: 18px;
   height: 18px;
   vertical-align: middle;

themes/light/cdm.less

@@ -208,12 +208,6 @@
 		}
 	}
 
-	.content-inner {
-		.icon-unpack-pending {
-			&:extend(body.ttrss_main .icon-three-dots);
-		}
-	}
-
 	.content-inner .embed-responsive {
 		overflow : hidden;
 		padding-bottom : @embed-responsive-padding;

themes/light/tt-rss.less

@@ -594,10 +594,10 @@ body.ttrss_main {
 					border : 1px solid transparent;
 
 					.loadingNode {
-						opacity : 0;
+						display : none;
 
 						&.visible {
-							opacity : 1;
+							display : inline;
 						}
 					}
 

themes/night.css

@@ -521,10 +521,10 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow {
   border: 1px solid transparent;
 }
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode {
-  opacity: 0;
+  display: none;
 }
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode.visible {
-  opacity: 1;
+  display: inline;
 }
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
   left: 2px;
@@ -1060,8 +1060,7 @@ body.ttrss_main .dijitDialog #feed_add_spinner {
   width: 18px;
   height: 18px;
 }
-body.ttrss_main .icon-three-dots,
+body.ttrss_main .icon-three-dots {
-.cdm .content-inner .icon-unpack-pending {
   width: 18px;
   height: 18px;
   vertical-align: middle;

themes/night_blue.css

@@ -521,10 +521,10 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow {
   border: 1px solid transparent;
 }
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode {
-  opacity: 0;
+  display: none;
 }
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode.visible {
-  opacity: 1;
+  display: inline;
 }
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
   left: 2px;
@@ -1060,8 +1060,7 @@ body.ttrss_main .dijitDialog #feed_add_spinner {
   width: 18px;
   height: 18px;
 }
-body.ttrss_main .icon-three-dots,
+body.ttrss_main .icon-three-dots {
-.cdm .content-inner .icon-unpack-pending {
   width: 18px;
   height: 18px;
   vertical-align: middle;