use svg icon for headlines loadmore prompt

index.php

@@ -131,9 +131,10 @@
 
 <div id="main" dojoType="dijit.layout.BorderContainer">
     <div id="feeds-holder" dojoType="dijit.layout.ContentPane" region="leading" style="width : 20%" splitter="true">
-        <div id="feedlistLoading">
+        <div id="feedlistLoading" class="text-center text-muted text-small">
-            <img src='images/indicator_tiny.gif'/>
+			  	<img class="icon-three-dots" src="images/three-dots.svg?2">
-            <?= __("Loading, please wait..."); ?></div>
+				<?= __("Loading, please wait..."); ?>
+			</div>
         <?php
 			 PluginHost::getInstance()->run_hooks_callback(PluginHost::HOOK_FEED_TREE, function ($result) {
 				 echo $result;

js/Headlines.js

@@ -351,8 +351,7 @@ const Headlines = {
 
 					// invoke lazy load if last article in buffer is nearly visible OR is active
 					if (Article.getActive() == last_row.getAttribute("data-article-id") || last_row.offsetTop - 250 <= container.scrollTop + container.offsetHeight) {
-						hsp.innerHTML = "<span class='loading'><img src='images/indicator_tiny.gif'> " +
+						hsp.innerHTML = `<span class='text-muted text-small text-center'><img class="icon-three-dots" src="${App.getInitParam('icon_three_dots')}"> ${__("Loading, please wait...")}</span>`;
-							__("Loading, please wait...") + "</span>";
 
 						Headlines.loadMore();
 						return;

themes/compact.css

@@ -705,7 +705,6 @@ body.ttrss_main #headlines-frame #headlines-spacer {
   text-align: center;
   color: #555;
   font-size: 11px;
-  font-style: italic;
 }
 body.ttrss_main #headlines-frame #headlines-spacer a,
 body.ttrss_main #headlines-frame #headlines-spacer span {
@@ -1193,6 +1192,11 @@ body.ttrss_utility hr {
   width: 18px;
   height: 18px;
 }
+.icon-three-dots {
+  width: 18px;
+  height: 18px;
+  vertical-align: middle;
+}
 ::selection {
   background: #257aa7;
   color: white;
@@ -1384,6 +1388,7 @@ body.ttrss_utility hr {
 .cdm .content-inner .icon-unpack-pending {
   width: 18px;
   height: 18px;
+  vertical-align: middle;
 }
 .cdm .content-inner .embed-responsive {
   overflow: hidden;

themes/compact_night.css

@@ -705,7 +705,6 @@ body.ttrss_main #headlines-frame #headlines-spacer {
   text-align: center;
   color: #ccc;
   font-size: 11px;
-  font-style: italic;
 }
 body.ttrss_main #headlines-frame #headlines-spacer a,
 body.ttrss_main #headlines-frame #headlines-spacer span {
@@ -1193,6 +1192,11 @@ body.ttrss_utility hr {
   width: 18px;
   height: 18px;
 }
+.icon-three-dots {
+  width: 18px;
+  height: 18px;
+  vertical-align: middle;
+}
 ::selection {
   background: #b87d2c;
   color: #333;
@@ -1384,6 +1388,7 @@ body.ttrss_utility hr {
 .cdm .content-inner .icon-unpack-pending {
   width: 18px;
   height: 18px;
+  vertical-align: middle;
 }
 .cdm .content-inner .embed-responsive {
   overflow: hidden;

themes/light.css

@@ -705,7 +705,6 @@ body.ttrss_main #headlines-frame #headlines-spacer {
   text-align: center;
   color: #555;
   font-size: 11px;
-  font-style: italic;
 }
 body.ttrss_main #headlines-frame #headlines-spacer a,
 body.ttrss_main #headlines-frame #headlines-spacer span {
@@ -1193,6 +1192,11 @@ body.ttrss_utility hr {
   width: 18px;
   height: 18px;
 }
+.icon-three-dots {
+  width: 18px;
+  height: 18px;
+  vertical-align: middle;
+}
 ::selection {
   background: #257aa7;
   color: white;
@@ -1384,6 +1388,7 @@ body.ttrss_utility hr {
 .cdm .content-inner .icon-unpack-pending {
   width: 18px;
   height: 18px;
+  vertical-align: middle;
 }
 .cdm .content-inner .embed-responsive {
   overflow: hidden;

themes/light/cdm.less

@@ -210,8 +210,7 @@
 
 	.content-inner {
 		.icon-unpack-pending {
-			width : 18px;
+			.icon-three-dots;
-			height : 18px;
 		}
 	}
 

themes/light/tt-rss.less

@@ -829,7 +829,6 @@ body.ttrss_main {
 			text-align : center;
 			color : @default-text;
 			font-size : @font-size-small;
-			font-style : italic;
 
 			a, span {
 				color : @default-text;
@@ -1404,6 +1403,12 @@ body.ttrss_main, body.ttrss_utility {
 	}
 }
 
+.icon-three-dots {
+	width : 18px;
+	height : 18px;
+	vertical-align : middle;
+}
+
 ::selection {
 	background : @color-accent;
 	color : @default-bg;

themes/night.css

@@ -706,7 +706,6 @@ body.ttrss_main #headlines-frame #headlines-spacer {
   text-align: center;
   color: #ccc;
   font-size: 11px;
-  font-style: italic;
 }
 body.ttrss_main #headlines-frame #headlines-spacer a,
 body.ttrss_main #headlines-frame #headlines-spacer span {
@@ -1194,6 +1193,11 @@ body.ttrss_utility hr {
   width: 18px;
   height: 18px;
 }
+.icon-three-dots {
+  width: 18px;
+  height: 18px;
+  vertical-align: middle;
+}
 ::selection {
   background: #b87d2c;
   color: #333;
@@ -1385,6 +1389,7 @@ body.ttrss_utility hr {
 .cdm .content-inner .icon-unpack-pending {
   width: 18px;
   height: 18px;
+  vertical-align: middle;
 }
 .cdm .content-inner .embed-responsive {
   overflow: hidden;

themes/night_blue.css

@@ -706,7 +706,6 @@ body.ttrss_main #headlines-frame #headlines-spacer {
   text-align: center;
   color: #ccc;
   font-size: 11px;
-  font-style: italic;
 }
 body.ttrss_main #headlines-frame #headlines-spacer a,
 body.ttrss_main #headlines-frame #headlines-spacer span {
@@ -1194,6 +1193,11 @@ body.ttrss_utility hr {
   width: 18px;
   height: 18px;
 }
+.icon-three-dots {
+  width: 18px;
+  height: 18px;
+  vertical-align: middle;
+}
 ::selection {
   background: #257aa7;
   color: #333;
@@ -1385,6 +1389,7 @@ body.ttrss_utility hr {
 .cdm .content-inner .icon-unpack-pending {
   width: 18px;
   height: 18px;
+  vertical-align: middle;
 }
 .cdm .content-inner .embed-responsive {
   overflow: hidden;