From 70fefa84f57b5c91d2824b2a717a3ff19b926f2a Mon Sep 17 00:00:00 2001
From: Sauli Anto <sauli.anto@gmail.com>
Date: Wed, 9 Oct 2019 10:50:12 +0300
Subject: [PATCH] Fix preview flickering effect

---
 src/mathui.js | 8 +++++++-
 src/utils.js  | 7 ++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/mathui.js b/src/mathui.js
index 4dfe0b8..8984eba 100644
--- a/src/mathui.js
+++ b/src/mathui.js
@@ -43,6 +43,12 @@ export default class MathUI extends Plugin {
 		super.destroy();
 
 		this._form.destroy();
+
+		// Destroy preview element
+		let prewviewEl = document.getElementById( this._previewUid ); // eslint-disable-line
+		if ( prewviewEl ) {
+			prewviewEl.parentNode.removeChild( prewviewEl );
+		}
 	}
 
 	_showUI() {
@@ -151,7 +157,7 @@ export default class MathUI extends Plugin {
 			// Hide preview element
 			let prewviewEl = document.getElementById( this._previewUid );// eslint-disable-line
 			if ( prewviewEl ) {
-				prewviewEl.style.display = 'none';
+				prewviewEl.style.visibility = 'hidden';
 			}
 
 			this.editor.editing.view.focus();
diff --git a/src/utils.js b/src/utils.js
index f748d1c..9491afc 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -48,8 +48,8 @@ export function renderEquation( equation, element, engine = 'katex', display = f
 			selectRenderMode( element, preview, previewUid, el => {
 				renderMathJax3( equation, el, display, () => {
 					if ( preview ) {
-						el.style.display = 'block';
 						moveAndScaleElement( element, el );
+						el.style.visibility = 'visible';
 					}
 				} );
 			} );
@@ -64,8 +64,8 @@ export function renderEquation( equation, element, engine = 'katex', display = f
 					if ( preview ) {
 						// eslint-disable-next-line
 						MathJax.Hub.Queue( () => {
-							el.style.display = 'block';
 							moveAndScaleElement( element, el );
+							el.style.visibility = 'visible';
 						} );
 					}
 				} );
@@ -78,8 +78,8 @@ export function renderEquation( equation, element, engine = 'katex', display = f
 				displayMode: display
 			} );
 			if ( preview ) {
-				el.style.display = 'block';
 				moveAndScaleElement( element, el );
+				el.style.visibility = 'visible';
 			}
 		} );
 	} else if ( typeof engine === 'function' ) {
@@ -140,6 +140,7 @@ function getPreviewElement( element, previewUid ) {
 	if ( !prewviewEl ) {
 		prewviewEl = document.createElement( 'div' ); // eslint-disable-line
 		prewviewEl.setAttribute( 'id', previewUid );
+		prewviewEl.style.visibility = 'hidden';
 		document.body.appendChild( prewviewEl ); // eslint-disable-line
 
 		let ticking = false;