Improve ts hooks to allow for asynchronous actions

* reviewer ts hooks may now return a promise, which are then waited upon with Promise.all
* this does not break old ts hooks, as Promise.all allows for non-Promises in its array

qt/aqt/data/web/js/reviewer.ts

@@ -11,10 +11,14 @@ var aFade = 0;
 var onUpdateHook;
 var onShownHook;
 
-function _runHook(arr) {
+function _runHook(arr: () => Promise<any>[]): Promise<any[]> {
+    var promises = [];
+
     for (var i = 0; i < arr.length; i++) {
-        arr[i]();
+        promises.push(arr[i]());
     }
+
+    return Promise.all(promises);
 }
 
 function _updateQA(html, fadeTime, onupdate, onshown) {
@@ -32,35 +36,38 @@ function _updateQA(html, fadeTime, onupdate, onshown) {
     onUpdateHook = [onupdate];
     onShownHook = [onshown];
 
-    // fade out current text
     var qa = $("#qa");
-    qa.fadeTo(fadeTime, 0, function () {
-        // update text
-        try {
-            qa.html(html);
-        } catch (err) {
-            qa.html(
-                (
-                    `Invalid HTML on card: ${String(err).substring(0, 2000)}\n` +
-                    String(err.stack).substring(0, 2000)
-                ).replace(/\n/g, "<br />")
-            );
-        }
-        _runHook(onUpdateHook);
 
-        // @ts-ignore
+    // fade out current text
-        MathJax.startup.promise
+    qa.fadeOut(fadeTime).promise()
-            // render mathjax
+        // update text
-            // @ts-ignore
+        .then(() => {
-            .then(MathJax.typesetPromise)
+            try {
-            // and reveal when processing is done
+                qa.html(html)
-            .then(function () {
+            }
-                qa.fadeTo(fadeTime, 1, function () {
+            catch (err) {
-                    _runHook(onShownHook);
+                qa.html(
-                    _updatingQA = false;
+                    (
-                });
+                        `Invalid HTML on card: ${String(err).substring(0, 2000)}\n` +
-            });
+                        String(err.stack).substring(0, 2000)
-    });
+                    ).replace(/\n/g, "<br />")
+                );
+            }
+        })
+        .then(() => _runHook(onUpdateHook))
+        // @ts-ignore wait for mathjax to ready
+        .then(() => MathJax.startup.promise
+            .then(() => {
+                // @ts-ignore clear MathJax buffer
+                MathJax.typesetClear();
+
+                // @ts-ignore typeset
+                return MathJax.typesetPromise(qa.slice(0, 1));
+            }))
+        // and reveal when processing is done
+        .then(() => qa.fadeIn(fadeTime).promise())
+        .then(() => _runHook(onShownHook))
+        .then(() => _updatingQA = false);
 }
 
 function _showQuestion(q, bodyclass) {