MathJax very slow in questions that are closed

Question

MathJax redisplay is very slow in the preview pane while editing answers in closed questions. Redisplay that normally happens in under a second can take up to $5$ times longer.

Not too infrequently when organizing dupes I need to edit older closed questions, so I have to resort to performing the edit elsewhere in order to workaround this problem. This is a bit of a pain so it would be nice if it could be fixed (I suspect it is an easy fix).

Answer 1

This is fixed.

What went wrong?

When we insert an editor into a page on a site that includes MathJax, we inject some JavaScript that looked like this:

loadMathJaxEditorFeatures()
.done(() => {
    Editor.creationCallbacks.add((editor) => {
        configureEditorWithMathJaxFeatures(editor);
    });
});

Basically, this lazy loads the features needed for MathJax and adds those configuration steps when creating a new editor. Unfortunately, this only affects editors created after the feature was loaded, triggering a race between the file download and the editor field initialization.

So, why was this only affecting closed questions? It turns out it wasn't. It happened on any page where an edit field was late loaded (not in the body). E.g., protected questions or review queues.

Open questions include a hidden answer editor that instantly triggers the editor features to download, but doesn't try configuring itself until you click "Add an answer". "Ask a question" probably had a similar condition I didn't expect.

Also, it only affected the first post on a page you edited, since the configuration callback was set up with the first editor.

Why was it just slow and not completely broken?

MathJax did eventually render because 5 seconds after you stop typing we trigger styleCode() a function that triggers MathJax rendering and code block syntax highlighting. We do that on all sites with a high delay because syntax highlighting isn't critical during editing.

How was this fixed?

I moved code around so basically this happens the when we load the editor code:

var loaded = false;
var loadCallbacks = $.Callbacks();

Editor.creationCallbacks.add((editor) => {
    if (loaded) {
        configureEditorWithMathJaxFeatures(editor);
    } else {
        loadCallbacks.add(() => {
            configureEditorWithMathJaxFeatures(editor);
            refreshEditorPreview(editor);
        });
    }
});

loadMathJaxEditorFeatures()
.done(() => {
    loaded = true;
    loadCallbacks.fire();
    loadCallbacks.empty();
});

This code keeps track of editors that were configured prior to the features being loaded, applies the features and refreshes the previews.