feat: replace loading message with animation

extension.json

@@ -34,7 +34,6 @@
 				}
 			],
 			"messages": [
-				"tabberneue-loading",
 				"tabberneue-error"
 			],
 			"styles": [

i18n/en.json

@@ -7,6 +7,5 @@
         ]
     },
     "tabberneue-desc": "Allows to create tabs within a page. Forked from [https://www.mediawiki.org/wiki/Extension:Tabber Extension:Tabber].",
-    "tabberneue-loading": "Loading...",
     "tabberneue-error": "Error."
 }

i18n/qqq.json

@@ -5,6 +5,5 @@
 		]
 	},
 	"tabberneue-desc": "{{desc|name=TabberNeue|url=http://www.mediawiki.org/wiki/Extension:TabberNeue}}",
-	"tabberneue-loading": "Placeholder loading message for the tab content",
     "tabberneue-error": "Error message shown loading tab content"
 }

includes/TabberNeueHooks.php

@@ -150,7 +150,7 @@ class TabberNeueHooks {
 				// Add a link placeholder, as a fallback if JavaScript doesn't execute
 				$linkRenderer = MediaWikiServices::getInstance()->getLinkRenderer();
 				$tabBody = sprintf(
-					'<div class="tabber__ajaxplaceholder">%s</div>',
+					'<div class="tabber__transclusion">%s</div>',
 					$linkRenderer->makeLink( $title, null, [ 'rel' => 'nofollow' ] )
 				);
 				$dataProps['pending-load'] = '1';
@@ -164,9 +164,9 @@ class TabberNeueHooks {
 				$dataProps['load-url'] = wfExpandUrl( wfScript( 'api' ) . $query,  PROTO_CANONICAL );
 				$oldTabBody = $tabBody;
 				// Allow extensions to update the lazy loaded tab
-				Hooks::run( 'TabberTranscludeRenderLazyLoadedTab', [ &$tabBody, &$dataProps, $parser, $frame ] );
+				Hooks::run( 'TabberNeueRenderLazyLoadedTab', [ &$tabBody, &$dataProps, $parser, $frame ] );
 				if ( $oldTabBody != $tabBody ) {
-					$parser->getOutput()->recordOption( 'tabbertranscludelazyupdated' );
+					$parser->getOutput()->recordOption( 'tabberneuelazyupdated' );
 				}
 			}
 			// Register as a template

modules/ext.tabberNeue.js

@@ -199,9 +199,12 @@ function initTabber( tabber, count ) {
 			parentPanel, parentSection;
 
 		if ( allowRemoteLoad && targetPanel.dataset.tabberPendingLoad && targetPanel.dataset.tabberLoadUrl ) {
-			var loading = document.createElement( 'div' );
-			loading.setAttribute( 'class', 'tabber__loading' );
-			loading.appendChild( document.createTextNode( mw.message( 'tabberneue-loading' ).text() ) );
+			var loading = document.createElement( 'div' ),
+				indicator = document.createElement( 'div' );
+
+			loading.setAttribute( 'class', 'tabber__transclusion--loading' );
+			indicator.setAttribute( 'class', 'tabber__loading-indicator' );
+			loading.appendChild( indicator );
 			targetPanel.textContent = '';
 			targetPanel.appendChild( loading );
 			loadPage( targetPanel, targetPanel.dataset.tabberLoadUrl );
@@ -260,7 +263,7 @@ function initTabber( tabber, count ) {
 		var targetPanel = currentRequest.targetPanel;
 		if ( xhr.status != 200 ) {
 			var err = document.createElement( 'div' );
-			err.setAttribute( 'class', 'tabber__error' );
+			err.setAttribute( 'class', 'tabber__transclusion--error' );
 			err.appendChild( document.createTextNode( mw.message( 'tabberneue-error' ).text() ) );
 			targetPanel.textContent = '';
 			targetPanel.appendChild( err );

modules/ext.tabberNeue.less

@@ -1,3 +1,5 @@
+@width-bounce-dot: 12px;
+
 .tabber {
 	position: relative;
 	display: flex;
@@ -137,6 +139,55 @@
 		overscroll-behavior-y: contain;
 		scroll-snap-align: start;
 	}
+
+	&__transclusion {
+		/*
+		 * Animation based on dots indicators from Wikimedia
+		 * T266028
+		 */
+		&--loading {
+			margin: 0.5em 0; // based on Vector
+			text-align: center;
+			white-space: nowrap;
+
+			.tabber__loading-indicator,
+			&:before,
+			&:after {
+				display: inline-block;
+				width: @width-bounce-dot;
+				height: @width-bounce-dot;
+				animation: bounce-delay 1600ms infinite ease-in-out both;
+				animation-delay: -160ms;
+				background-color: #36c;
+				border-radius: 100%;
+				content: '';
+			}
+
+			&:before {
+				margin-right: @width-bounce-dot / 4;
+				animation-delay: -330ms;
+			}
+
+			&:after {
+				margin-left: @width-bounce-dot / 4;
+				animation-delay: 0ms;
+			}
+		}
+	}
+}
+
+// Animations
+@keyframes bounce-delay {
+	0%,
+	50%,
+	100% {
+		transform: scale( 0.625 );
+	}
+
+	20% {
+		opacity: 0.87;
+		transform: scale( 1 );
+	}
 }
 
 @media ( hover: hover ) {