Add search loading indicator

includes/CitizenHooks.php

@@ -57,6 +57,13 @@ class CitizenHooks {
 			$vars['wgCitizenMaxSearchResults'] = 6;
 		}
 
+		try {
+			$vars['wgCitizenEnableSearch'] = self::getSkinConfig( 'CitizenEnableSearch' );
+		} catch ( ConfigException $e ) {
+			// Should not happen
+			$vars['wgCitizenEnableSearch'] = true;
+		}
+
 		return true;
 	}
 

includes/SkinCitizen.php

@@ -51,13 +51,8 @@ class SkinCitizen extends SkinMustache {
 		// Theme color
 		$out->addMeta( 'theme-color', $this->getConfigValue( 'CitizenThemeColor' ) ?? '' );
 
-		// Load Citizen search suggestion modules if enabled
-		// TODO: Avoid eager loading. check T233677 for details
+		// Load Citizen search suggestion styles if enabled
 		if ( $this->getConfigValue( 'CitizenEnableSearch' ) === true ) {
-			$options['scripts'] = array_merge(
-				$options['scripts'],
-				[ 'skins.citizen.scripts.search' ]
-			);
 			$options['styles'] = array_merge(
 				$options['styles'],
 				[

resources/skins.citizen.scripts.search/wm-typeahead.js

@@ -290,11 +290,14 @@ window.WMTypeAhead = function ( appendTo, searchInput ) {
 				break;
 		}
 
-		// typeAheadEl.innerHTML = getLoadingIndicator();
+		// Add loading animation when suggestion is loading
+		appendEl.classList.add( 'search-form__loading' );
 
 		api.get( searchQuery )
 			.done( ( data ) => {
 				clearTypeAheadElements();
+				// Clean up loading animation after result ls loaded
+				appendEl.classList.remove( 'search-form__loading' );
 				window.callbackStack.queue[ callbackIndex ]( data, string );
 			} );
 	} // END loadQueryScript

resources/skins.citizen.scripts/skins.citizen.scripts.js

@@ -4,7 +4,8 @@
  */
 
 var searchToggle = document.getElementById( 'search-toggle' ),
-	searchInput = document.getElementById( 'searchInput' );
+	searchInput = document.getElementById( 'searchInput' ),
+	pageReady = require( ( 'mediawiki.page.ready' ) );
 
 /**
  * Focus in search box when search toggle checkbox is checked.
@@ -31,6 +32,11 @@ function searchToggleCheck() {
 function main() {
 	searchToggle.addEventListener( 'click', searchInputFocus );
 	searchInput.addEventListener( 'focus', searchToggleCheck );
+	pageReady.loadSearchModule(
+		// Decide between new Citizen implementation or core
+		mw.config.get( 'wgCitizenEnableSearch' ) ?
+			'skins.citizen.scripts.search' : 'mediawiki.searchSuggest'
+	);
 }
 
 main();

resources/skins.citizen.styles.search/skins.citizen.styles.search.less

@@ -130,6 +130,74 @@ a.suggestion-link:hover {
 	}
 }
 
+/**
+ * Loading indicator for search widget
+ * Based on Vector
+ *
+ * By adding a class on the parent search form
+ * <div id="searchform" class="search-form__loader"></div>
+ * A pseudo element is added via ':after' that adds the loading indicator.
+ *
+ * After appearing for more than a second, a progress-bar animation appears
+ * above the loading indicator.
+ *
+ **/
+#searchform.search-form__loading:after {
+	// Placeholder text
+	content: 'loading';
+	// Position loader below the input.
+	display: block;
+	position: absolute;
+	top: 100%;
+	width: 100%;
+	// Overlay the form
+	margin-top: -@search-loader-progress-bar-height;
+	z-index: 999;
+	// Ensure it doesn't extend beyond the input.
+	box-sizing: border-box;
+	// Align style with the form
+	border-radius: 0 0 @border-radius-large @border-radius-large;
+	// Hide text in case it extends beyond the input.
+	height: @search-loader-progress-bar-height;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	// Add a progress-bar to the loading indicator,
+	// but only show it animating after 1 second of loading.
+	background: /*image*/ linear-gradient( 90deg, @accent-50 0%, @accent-50 100% )
+		/* position / size*/ -10% 0 ~'/' 0 @search-loader-progress-bar-height
+		/* repeat */ no-repeat,transparent;
+	// Animates the progress-bar.
+	animation: search-loader-progress-bar
+		/* duration */ 1200ms
+		/* timing function */ linear
+		/* delay */ 1000ms
+		/* iteration count */ infinite
+		/* fill direction */ alternate;
+}
+
+@keyframes search-loader-progress-bar {
+	0% {
+		background-size: 0 @search-loader-progress-bar-height;
+		background-position: -10% 0;
+	}
+
+	30% {
+		background-size: 30% @search-loader-progress-bar-height;
+		background-position: -10% 0;
+	}
+
+	70% {
+		background-size: 30% @search-loader-progress-bar-height;
+		background-position: 110% 0;
+	}
+
+	100% {
+		background-size: 0 @search-loader-progress-bar-height;
+		background-position: 110% 0;
+	}
+}
+
 @media only screen and ( max-width: @search-bar-width ) {
 	.suggestions-dropdown {
 		position: fixed;

resources/variables.less

@@ -26,6 +26,7 @@
 
 @search-bar-width: 500px;
 @search-bar-height: 42px;
+@search-loader-progress-bar-height: 2px;
 
 @border-radius-small: 4px;
 @border-radius-medium: @border-radius-small * 2;

skin.json

@@ -112,6 +112,9 @@
 		"skins.citizen.scripts": {
 			"scripts": [
 				"resources/skins.citizen.scripts/skins.citizen.scripts.js"
+			],
+			"dependencies": [
+				"mediawiki.page.ready"
 			]
 		},
 		"skins.citizen.scripts.lazyload": {

skinStyles/extensions/Flow/ext.flow.ui.less

@@ -21,7 +21,7 @@
  	mw.flow.ui.EditorWidget.less
    */
 	.flow-ui-editorWidget > .flow-ui-editorWidget-editor,
-	.flow-ui-editorWidget > .flow-ui-editorWidget-editor:not(.oo-ui-pendingElement-pending) {
+	.flow-ui-editorWidget > .flow-ui-editorWidget-editor:not( .oo-ui-pendingElement-pending ) {
 		background-color: @dark-bg-10;
 		border-color: @dark-bg-30;
 	}

skinStyles/oojs/oojs-ui-toolbars.less

@@ -178,7 +178,6 @@
 			background-color: rgba( 41, 98, 204, 0.1 );
 			color: @dark-text-100;
 		}
-
 		background-color: @accent-10;
 	}
 
@@ -260,7 +259,7 @@
 
 	.oo-ui-barToolGroup-tools.oo-ui-toolGroup-enabled-tools .oo-ui-tool.oo-ui-widget-disabled.oo-ui-flaggedElement-primary > .oo-ui-tool-link,
 	.oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary > .oo-ui-tool-link {
-		background-color: @dark-bg-30;;
-		border-color: @dark-bg-30;;
+		background-color: @dark-bg-30;
+		border-color: @dark-bg-30;
 	}
 }