feat: add page load progress bar

resources/skins.citizen.scripts/search.js

@@ -2,7 +2,7 @@
 /* ESLint does not like having class names as const */
 /* eslint-disable mediawiki/class-doc */
 const SEARCH_INPUT_ID = 'searchInput',
-	SEARCH_LOADING_CLASS = 'search-form__loading';
+	SEARCH_LOADING_CLASS = 'citizen-loading';
 
 /**
  * Loads the search module via `mw.loader.using` on the element's

resources/skins.citizen.scripts/skin.js

@@ -116,6 +116,10 @@ function main( window ) {
 	initCheckboxHack( window );
 	onTitleHidden( window.document );
 
+	window.addEventListener( 'beforeunload', () => {
+		document.documentElement.classList.add( 'citizen-loading' );
+	}, false );
+
 	mw.loader.load( 'skins.citizen.preferences' );
 }
 

resources/skins.citizen.search/typeahead.js

@@ -1,4 +1,5 @@
-const config = require( './config.json' );
+const config = require( './config.json' ),
+	SEARCH_LOADING_CLASS = 'citizen-loading';
 
 const activeIndex = {
 	index: -1,
@@ -131,7 +132,8 @@ function clearSuggestions() {
 	}
 
 	// Remove loading animation
-	searchInput.parentNode.classList.remove( 'search-form__loading' );
+	/* eslint-disable-next-line mediawiki/class-doc */
+	searchInput.parentNode.classList.remove( SEARCH_LOADING_CLASS );
 	searchInput.setAttribute( 'aria-activedescendant', '' );
 	activeIndex.clear();
 }
@@ -188,7 +190,8 @@ function getSuggestions( searchQuery ) {
 	};
 
 	// Add loading animation
-	searchInput.parentNode.classList.add( 'search-form__loading' );
+	/* eslint-disable-next-line mediawiki/class-doc */
+	searchInput.parentNode.classList.add( SEARCH_LOADING_CLASS );
 
 	/* eslint-disable-next-line compat/compat */
 	const controller = new AbortController(),
@@ -213,7 +216,8 @@ function getSuggestions( searchQuery ) {
 		activeIndex.setMax( results.length );
 	} ).catch( ( error ) => {
 		searchInput.removeEventListener( 'input', abortFetch );
-		searchInput.parentNode.classList.remove( 'search-form__loading' );
+		/* eslint-disable-next-line mediawiki/class-doc */
+		searchInput.parentNode.classList.remove( SEARCH_LOADING_CLASS );
 		// User can trigger the abort when the fetch event is pending
 		// There is no need for an error
 		if ( error.name !== 'AbortError' ) {

resources/skins.citizen.styles/Searchbox.less

@@ -276,68 +276,10 @@
 
 /**
  * Loading indicator for searchbox
- * In core so that loading animation can appear while the search module loads
- * 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.
- *
+ * See common/progressbar.less
  **/
-#searchform.search-form__loading:after {
-	--height-search-bar__progress-bar: @height-search-bar__progress-bar;
+
+#searchform.citizen__loading:after {
 	position: absolute;
-	z-index: 999;
 	top: 100%;
-	// Position loader below the input.
-	display: block;
-	overflow: hidden;
-	width: 100%;
-	// Hide text in case it extends beyond the input.
-	height: var( --height-search-bar__progress-bar );
-	// Ensure it doesn't extend beyond the input.
-	box-sizing: border-box;
-	// Animates the progress-bar.
-	animation: search-bar__progress-bar
-		/* duration */ 1200ms
-		/* timing function */ linear
-		/* delay */ 1000ms
-		/* iteration count */ infinite
-		/* fill direction */ alternate;
-	// Add a progress-bar to the loading indicator,
-	// but only show it animating after 1 second of loading.
-	background: /*image*/ linear-gradient( 90deg, var( --color-primary ) 0%, var( --color-primary ) 100% )
-		/* position / size*/ -10% 0 ~'/' 0 var( --height-search-bar__progress-bar )
-		/* repeat */ no-repeat,transparent;
-	// Align style with the form
-	border-radius: 0 0 var( --border-radius--large ) var( --border-radius--large );
-	// Placeholder text
-	content: 'loading';
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-@keyframes search-bar__progress-bar {
-	0% {
-		background-position: -10% 0;
-		background-size: 0 var( --height-search-bar__progress-bar );
-	}
-
-	30% {
-		background-position: -10% 0;
-		background-size: 30% var( --height-search-bar__progress-bar );
-	}
-
-	70% {
-		background-position: 110% 0;
-		background-size: 30% var( --height-search-bar__progress-bar );
-	}
-
-	100% {
-		background-position: 110% 0;
-		background-size: 0 var( --height-search-bar__progress-bar );
-	}
 }

resources/skins.citizen.styles/common/progressbar.less

@@ -0,0 +1,69 @@
+/**
+ * Loading indicator
+ * Based on Vector
+ *
+ * By adding a class on the parent search form
+ * <div class=".citizen-loading"></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.
+ *
+ **/
+.citizen-loading:after {
+	--height-progress-bar: @height-progress-bar;
+	z-index: 999;
+	display: block;
+	overflow: hidden;
+	width: 100%;
+	// Hide text in case it extends beyond the input.
+	height: var( --height-progress-bar );
+	// Ensure it doesn't extend beyond the input.
+	box-sizing: border-box;
+	// Animates the progress-bar.
+	animation: progress-bar
+		/* duration */ 1200ms
+		/* timing function */ linear
+		/* delay */ 1000ms
+		/* iteration count */ infinite
+		/* fill direction */ alternate;
+	// Add a progress-bar to the loading indicator,
+	// but only show it animating after 1 second of loading.
+	background: /*image*/ linear-gradient( 90deg, var( --color-primary ) 0%, var( --color-primary ) 100% )
+		/* position / size*/ -10% 0 ~'/' 0 var( --height-progress-bar )
+		/* repeat */ no-repeat,transparent;
+	// Align style with the form
+	border-radius: 0 0 var( --border-radius--large ) var( --border-radius--large );
+	// Placeholder text
+	content: 'loading';
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+@keyframes progress-bar {
+	0% {
+		background-position: -10% 0;
+		background-size: 0 var( --height-progress-bar );
+	}
+
+	30% {
+		background-position: -10% 0;
+		background-size: 30% var( --height-progress-bar );
+	}
+
+	70% {
+		background-position: 110% 0;
+		background-size: 30% var( --height-progress-bar );
+	}
+
+	100% {
+		background-position: 110% 0;
+		background-size: 0 var( --height-progress-bar );
+	}
+}
+
+// On page unload
+html.citizen-loading:after {
+	position: fixed;
+	top: 0;
+}

resources/skins.citizen.styles/skin.less

@@ -14,6 +14,7 @@
 	@import 'common/hacks.less';
 	@import 'common/wikitable.less';
 	@import 'common/reducemotion.less';
+	@import 'common/progressbar.less';
 
 	// Components
 	@import 'Header.less';

resources/variables.less

@@ -303,6 +303,7 @@
 @icon-padding: 15px;
 @padding-menu-item: 10px 15px;
 @padding-menu-item-big: 10px 20px;
+@height-progress-bar: 2px;
 
 /* Heade */
 @margin-header-item: 8px;
@@ -310,7 +311,6 @@
 /* Search bar */
 @width-search-bar: 500px;
 @height-search-bar: 42px;
-@height-search-bar__progress-bar: 2px;
 
 /*
  * Text hierarchy