From 3e03ab269468e8a10e21746cae80aaf057857759 Mon Sep 17 00:00:00 2001
From: Fomafix <fomafix@googlemail.com>
Date: Wed, 3 Jul 2019 18:02:35 +0200
Subject: [PATCH] mediawiki.action.edit.preview: Use CSS instead of jQuery for
 animation

Change-Id: I9f79ddf2cf4548dbf8b8553da030d6da4772187e
---
 resources/Resources.php                              |  1 +
 .../mediawiki.action.edit.preview.css                |  7 +++++++
 .../mediawiki.action.edit.preview.js                 | 12 ++----------
 3 files changed, 10 insertions(+), 10 deletions(-)
 create mode 100644 resources/src/mediawiki.action/mediawiki.action.edit.preview.css

diff --git a/resources/Resources.php b/resources/Resources.php
index 92b4fd4492..f510329fda 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1365,6 +1365,7 @@ return [
 	],
 	'mediawiki.action.edit.preview' => [
 		'scripts' => 'resources/src/mediawiki.action/mediawiki.action.edit.preview.js',
+		'styles' => 'resources/src/mediawiki.action/mediawiki.action.edit.preview.css',
 		'dependencies' => [
 			'jquery.spinner',
 			'jquery.textSelection',
diff --git a/resources/src/mediawiki.action/mediawiki.action.edit.preview.css b/resources/src/mediawiki.action/mediawiki.action.edit.preview.css
new file mode 100644
index 0000000000..87030dfbb2
--- /dev/null
+++ b/resources/src/mediawiki.action/mediawiki.action.edit.preview.css
@@ -0,0 +1,7 @@
+.mw-preview-copyelements {
+	transition: opacity 200ms;
+}
+
+.mw-preview-copyelements-loading {
+	opacity: 0.4;
+}
diff --git a/resources/src/mediawiki.action/mediawiki.action.edit.preview.js b/resources/src/mediawiki.action/mediawiki.action.edit.preview.js
index 3af82226f1..7f2dbdd079 100644
--- a/resources/src/mediawiki.action/mediawiki.action.edit.preview.js
+++ b/resources/src/mediawiki.action/mediawiki.action.edit.preview.js
@@ -71,11 +71,7 @@
 			$spinner.show();
 		}
 
-		// Can't use fadeTo because it calls show(), and we might want to keep some elements hidden
-		// (e.g. empty #catlinks)
-		// FIXME: Use CSS transition
-		// eslint-disable-next-line no-jquery/no-animate
-		$copyElements.animate( { opacity: 0.4 }, 'fast' );
+		$copyElements.addClass( [ 'mw-preview-copyelements', 'mw-preview-copyelements-loading' ] );
 
 		api = new mw.Api();
 		postData = {
@@ -259,11 +255,7 @@
 			mw.hook( 'wikipage.editform' ).fire( $editform );
 		} ).always( function () {
 			$spinner.hide();
-			// FIXME: Use CSS transition
-			// eslint-disable-next-line no-jquery/no-animate
-			$copyElements.animate( {
-				opacity: 1
-			}, 'fast' );
+			$copyElements.removeClass( 'mw-preview-copyelements-loading' );
 		} ).fail( function ( code, result ) {
 			// This just shows the error for whatever request failed first
 			var errorMsg = 'API error: ' + code;
-- 
2.20.1