Harmonize resource loading spinner (#788)

* remove redundant module

* use global spinner

* replace spinner with srf-loading-dots

* fix requireResource

* add srf-loading-dots hide

* edit spinner padding

* fix spinner

Resources.php

@@ -115,12 +115,7 @@
 	'ext.srf' => $moduleTemplate + [
 		'scripts' => 'resources/ext.srf.js',
 		'styles'  => [
-			'resources/ext.srf.css',
-
-			// Someone broke the CSS loading (Suspect bug 46401) in 1.22
-			// until this is fixed force styles to be loaded at the very start
-			// to avoid display clutter
-			'formats/calendar/resources/ext.srf.formats.eventcalendar.css',
+			'resources/ext.srf.css'
 		],
 		'dependencies' => 'ext.smw.api',
 		'position' => 'top',

SemanticResultFormats.utils.php

@@ -19,16 +19,11 @@ final class SRFUtils {
 	 * @since 1.8
 	 */
 	public static function htmlProcessingElement( $isHtml = true ) {
-		SMWOutputs::requireResource( 'ext.srf' );
+		SMWOutputs::requireResource( 'ext.smw.style' );
 
 		return Html::rawElement(
 			'div',
-			[ 'class' => 'srf-spinner mw-small-spinner' ],
-			Html::element(
-				'span',
-				[ 'class' => 'srf-processing-text' ],
-				wfMessage( 'srf-module-loading' )->inContentLanguage()->text()
-			)
+			[ 'class' => 'srf-loading-dots' ]
 		);
 	}
 

resources/ext.srf.css

@@ -19,7 +19,7 @@
 
 .srf-loading-dots {
 	background: url('data:image/gif;base64,R0lGODlhIgAUAMQRAOjp6dTW19ze3+Xm54iKjevs7IKEh/f396Olp5ianPz8/Judn9fY2YGDhp+ho4CChdHT1P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxRThFNDZFQ0RFQjJFMjExQUZCNUREQjU1MEFCRTI5OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozNkVFNURCOUIyREYxMUUyQTBEQUNFNUIzREVGNjg0MyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozNkVFNURCOEIyREYxMUUyQTBEQUNFNUIzREVGNjg0MyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyMDhFNDZFQ0RFQjJFMjExQUZCNUREQjU1MEFCRTI5OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxRThFNDZFQ0RFQjJFMjExQUZCNUREQjU1MEFCRTI5OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAkyABEALAAAAAAiABQAAAVeYCSOZGmeaKqubOu+cCzPdM0iBIGYgCAUPB8Q5XgYHw4SAMKEAJRNJ8pwfBhIgagAq0U1qg1ukyFmkk+L6oI0iD5H7ebbdEgYEweSYhAIDEp7fX82hIWGh4iJiosoIQAh+QQJMgARACwAAAAAIgAUAAAFZGAkjmRpnmiqrmzrvnAsz3TNFoIAmAhBICZArpACQI6Q3cjxaD4cJCNSaRIgIQGSwfkwkAJXAYpxzY4a3Mb3ykBJjwPSgrsgDa5U0yAQGChIBwlNCQckCnt9NoqLjI2Oj5CRKSEAIfkEBTIAEQAsAAAAACIAFAAABWNgJI5kaZ5oqq5s675wLM90zRaCAJi4biIEAiIFgBghu1HxmBQ5HtCHAyU4QgKk6hE7MkQfBhTDyhWNt6TGt4FaGgckNwQ+WnwXqUEgMFCU9Hx+IwcJUAkHNomKi4yNjo+QKCEAOw==') no-repeat left center;
-	padding: 5px 0 5px 35px;
+	padding: 24px 0 24px 35px;
 	vertical-align: middle;
 }
 

resources/ext.srf.util.js

@@ -203,6 +203,7 @@
 			hide: function ( options ){
 				var c = options.length === undefined ? options.context : options;
 				c.find( '.' + _CL_srfspinner ).hide();
+				c.find(".srf-loading-dots").hide();
 			}
 		},
 
@@ -361,4 +362,4 @@
 		 }
 	};
 
-} )( jQuery, mediaWiki, semanticFormats );
+} )( jQuery, mediaWiki, semanticFormats );

src/ResourceFormatter.php

@@ -6,6 +6,7 @@
 use SMWOutputs as ResourceManager;
 use SMWQueryResult as QueryResult;
 use SMW\Query\PrintRequest;
+use SRFUtils;
 
 /**
  * @since 3.0
@@ -50,12 +51,7 @@ public static function session() {
 	 * @since 3.0
 	 */
 	public static function placeholder() {
-		self::registerResources( [], [ 'ext.smw.style' ] );
-
-		return Html::rawElement(
-			'div',
-			[ 'class' => 'srf-loading-dots' ]
-		);
+		return SRFUtils::htmlProcessingElement();
 	}
 
 	/**

tests/phpunit/Integration/JSONScript/TestCases/media-01.json

@@ -35,7 +35,7 @@
 			"subject": "Test/Mediaplayer test 01",
 			"assert-output": {
 				"to-contain": [
-					"<div class=\"srf-media\"><div class=\"srf-spinner mw-small-spinner\"><span class=\"srf-processing-text\">Loading...</span></div><div id=\"srf-.*\" class=\"media-container\" style=\"display:none;\"></div></div>"
+					"<div class=\"srf-media\"><div class=\"srf-loading-dots\"></div><div id=\"srf-.*\" class=\"media-container\" style=\"display:none;\"></div></div>"
 				]
 			}
 		},
@@ -45,7 +45,7 @@
 			"subject": "Test/Mediaplayer test 02",
 			"assert-output": {
 				"to-contain": [
-					"<div class=\"srf-media\"><div class=\"srf-spinner mw-small-spinner\"><span class=\"srf-processing-text\">Loading...</span></div><div id=\"srf-.*\" class=\"media-container\" style=\"display:none;\"></div></div>"
+					"<div class=\"srf-media\"><div class=\"srf-loading-dots\"></div><div id=\"srf-.*\" class=\"media-container\" style=\"display:none;\"></div></div>"
 				]
 			}
 		},
@@ -55,7 +55,7 @@
 			"subject": "Test/Mediaplayer test 03",
 			"assert-output": {
 				"to-contain": [
-					"<div class=\"srf-media\"><div class=\"srf-spinner mw-small-spinner\"><span class=\"srf-processing-text\">Loading...</span></div><div id=\"srf-.*\" class=\"media-container\" style=\"display:none;\"></div></div>"
+					"<div class=\"srf-media\"><div class=\"srf-loading-dots\"></div><div id=\"srf-.*\" class=\"media-container\" style=\"display:none;\"></div></div>"
 				]
 			}
 		}
@@ -75,4 +75,4 @@
 		"is-incomplete": false,
 		"debug": false
 	}
-}
+}