use svg icon for packed article placeholders

js/Article.js

@@ -283,7 +283,9 @@ const Article = {
 			row.setAttribute("data-content", row.getAttribute("data-content-original"));
 			row.removeAttribute("data-content-original");
 
-			row.querySelector(".content-inner").innerHTML = " ";
+			row.querySelector(".content-inner").innerHTML = `<div class="text-center">
+				<img class="icon-unpack-pending" src="${App.getInitParam('icon_three_dots')}">
+			</div>`
 		}
 	},
 	view: function (id, no_expand) {

js/Headlines.js

@@ -534,7 +534,9 @@ 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'}">
-								<img src="${App.getInitParam('icon_indicator_white')}">
+								<div class="text-center">
+									<img class="icon-unpack-pending" src="${App.getInitParam('icon_three_dots')}">
+								</div>
 							</div>
 							<div class="intermediate">
 								${Article.renderEnclosures(hl.enclosures)}

themes/compact.css

@@ -1375,6 +1375,10 @@ body.ttrss_utility hr {
 .cdm .feed-title a:hover {
   color: #257aa7;
 }
+.cdm .content-inner .icon-unpack-pending {
+  width: 18px;
+  height: 18px;
+}
 .cdm .content-inner .embed-responsive {
   overflow: hidden;
   padding-bottom: 56.25%;

themes/compact_night.css

@@ -1375,6 +1375,10 @@ body.ttrss_utility hr {
 .cdm .feed-title a:hover {
   color: #b87d2c;
 }
+.cdm .content-inner .icon-unpack-pending {
+  width: 18px;
+  height: 18px;
+}
 .cdm .content-inner .embed-responsive {
   overflow: hidden;
   padding-bottom: 56.25%;

themes/light.css

@@ -1375,6 +1375,10 @@ body.ttrss_utility hr {
 .cdm .feed-title a:hover {
   color: #257aa7;
 }
+.cdm .content-inner .icon-unpack-pending {
+  width: 18px;
+  height: 18px;
+}
 .cdm .content-inner .embed-responsive {
   overflow: hidden;
   padding-bottom: 56.25%;

themes/light/cdm.less

@@ -208,6 +208,13 @@
 		}
 	}
 
+	.content-inner {
+		.icon-unpack-pending {
+			width : 18px;
+			height : 18px;
+		}
+	}
+
 	.content-inner .embed-responsive {
 		overflow : hidden;
 		padding-bottom : @embed-responsive-padding;

themes/night.css

@@ -1376,6 +1376,10 @@ body.ttrss_utility hr {
 .cdm .feed-title a:hover {
   color: #b87d2c;
 }
+.cdm .content-inner .icon-unpack-pending {
+  width: 18px;
+  height: 18px;
+}
 .cdm .content-inner .embed-responsive {
   overflow: hidden;
   padding-bottom: 56.25%;

themes/night_blue.css

@@ -1376,6 +1376,10 @@ body.ttrss_utility hr {
 .cdm .feed-title a:hover {
   color: #257aa7;
 }
+.cdm .content-inner .icon-unpack-pending {
+  width: 18px;
+  height: 18px;
+}
 .cdm .content-inner .embed-responsive {
   overflow: hidden;
   padding-bottom: 56.25%;