From 6f3a161433cdc59f2d0c7646ba3326726d5f3d92 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Tue, 31 Dec 2019 13:43:38 -0500
Subject: [PATCH] Skeleton placeholder for search suggestion

---
 resources/components/search.less  | 15 +++++++++++++++
 resources/scripts/wm-typeahead.js |  4 ++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/resources/components/search.less b/resources/components/search.less
index 803b8c25..53b5cea0 100644
--- a/resources/components/search.less
+++ b/resources/components/search.less
@@ -224,6 +224,21 @@ a.suggestion-link:hover {
 	left: 0;
 }
 
+.suggestion-placeholder {
+	.suggestion-title {
+		width: 30%;
+		height: 1.6rem * @content-scaling;
+	}
+	.suggestion-description {
+		width: 70%;
+		height: 1.3rem * @content-scaling;
+	}
+	.suggestion-title,
+	.suggestion-description {
+		background-color: @base-90;
+	}
+}
+
 // RTL tweaks
 .rtl {
 	#site-search {
diff --git a/resources/scripts/wm-typeahead.js b/resources/scripts/wm-typeahead.js
index 0dcdb5d1..a858f4ac 100644
--- a/resources/scripts/wm-typeahead.js
+++ b/resources/scripts/wm-typeahead.js
@@ -244,7 +244,7 @@ window.WMTypeAhead = function ( appendTo, searchInput ) {
 	 * Card displayed if no results could be found
 	 * @returns {string}
 	 */
-	function getNoResultsIndicator() {
+	function getNoResultsIndicator( searchString ) {
 		const titlemsg = mw.message('citizen-search-no-results-title').plain(),
 		descmsg = mw.message('citizen-search-no-results-desc').plain();
 
@@ -357,7 +357,7 @@ window.WMTypeAhead = function ( appendTo, searchInput ) {
 			i;
 
 		if (suggestions.length === 0){
-			return getNoResultsIndicator();
+			return getNoResultsIndicator( searchString );
 		}
 
 		for ( i = 0; i < suggestions.length; i++ ) {