From: Moriel Schottlender <moriel@gmail.com>
Date: Fri, 21 Jul 2017 00:51:15 +0000 (-0700)
Subject: RCFilters: Change loading animation
X-Git-Tag: 1.31.0-rc.0~2639^2
X-Git-Url: http://git.cyclocoop.org/%22%20.%20generer_url_ecrire%28%22upgrade%22%2C%22reinstall=non%22%29%20.%20%22?a=commitdiff_plain;h=65b538b829bd2c63e90084e7522214b8f19f0b3b;p=lhc%2Fweb%2Fwiklou.git

RCFilters: Change loading animation

Bug: T165286
Change-Id: If816dd1e3a2677c36195546c51f87505ba883e04
---

diff --git a/includes/specials/SpecialRecentchanges.php b/includes/specials/SpecialRecentchanges.php
index 15bbffdb1f..c9c24759a4 100644
--- a/includes/specials/SpecialRecentchanges.php
+++ b/includes/specials/SpecialRecentchanges.php
@@ -669,6 +669,15 @@ class SpecialRecentChanges extends ChangesListSpecialPage {
 				[ 'class' => 'rcfilters-container' ]
 			);
 
+			$loadingContainer = Html::rawElement(
+				'div',
+				[ 'class' => 'rcfilters-spinner' ],
+				Html::element(
+					'div',
+					[ 'class' => 'rcfilters-spinner-bounce' ]
+				)
+			);
+
 			// Wrap both with rcfilters-head
 			$this->getOutput()->addHTML(
 				Html::rawElement(
@@ -677,6 +686,9 @@ class SpecialRecentChanges extends ChangesListSpecialPage {
 					$rcfilterContainer . $rcoptions
 				)
 			);
+
+			// Add spinner
+			$this->getOutput()->addHTML( $loadingContainer );
 		} else {
 			$this->getOutput()->addHTML( $rcoptions );
 		}
diff --git a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
index 6cd2d0b10e..9da3f8c6fe 100644
--- a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
+++ b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
@@ -39,6 +39,7 @@
 
 			// Set as ready
 			$( '.rcfilters-head' ).addClass( 'mw-rcfilters-ui-ready' );
+			$( '.rcfilters-spinner' ).detach();
 
 			$( 'a.mw-helplink' ).attr(
 				'href',
diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
index 6277fd95af..305f3f97da 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
@@ -1,5 +1,5 @@
 // Corrections for the standard special page
-.client-js{
+.client-js {
 	.rcoptions {
 		border: 0;
 		border-bottom: 1px solid #a2a9b1;
@@ -11,14 +11,10 @@
 
 	.rcfilters-head {
 		min-height: 310px;
-		&:not( .mw-rcfilters-ui-ready ) {
-			/* @embed */
-			background-image: url( ../images/pending.gif );
-			margin: 0;
 
-			* {
-				visibility: hidden;
-			}
+		&:not( .mw-rcfilters-ui-ready ) {
+			opacity: 0.5;
+			pointer-events: none;
 		}
 	}
 
@@ -33,8 +29,51 @@
 		// message of our own
 		display: none;
 	}
+
+	.rcfilters-spinner {
+		margin: -2em auto 0;
+		width: 70px;
+		opacity: 0.8;
+		display: block;
+		white-space: nowrap;
+
+		& .rcfilters-spinner-bounce,
+		&:before,
+		&:after {
+			content: '';
+			display: inline-block;
+			width: 12px;
+			height: 12px;
+			background-color: #c8ccd1;
+			border-radius: 100%;
+			animation: rcfiltersBouncedelay 1.5s infinite ease-in-out;
+			animation-fill-mode: both;
+			animation-delay: -0.16s;
+		}
+
+		&:before {
+			animation-delay: -0.33s;
+		}
+
+		&:after {
+			animation-delay: 0s;
+		}
+
+	}
 }
 
 .mw-rcfilters-staticfilters-selected {
 	font-weight: bold;
 }
+
+@keyframes rcfiltersBouncedelay {
+	0%,
+	100%,
+	80% {
+		transform: scale( 0.7 );
+	}
+	40% {
+		transform: scale( 1 );
+		background-color: #a2a9b1;
+	}
+}