Flash of unstyled math every render

[tscizzle]

When a Mathjax element is first rendered, it has an awkward-looking flash where you can see the math but it's not styled.

When rendering some static math content to a page, it seems there is a solution (outlined here: https://github.com/mathjax/MathJax/issues/131). I think it's saying you can hide the Mathjax element until Mathjax has loaded / run or whatever, and then only unhide it when things re ready, so that you don't get the awkward-looking flash of unstyled math.

But with React, if your math content contains any dynamic value, then you don't just render the Mathjax element once. You render it every time the value changes. This means the above-described solution doesn't work, and you get the awkward-looking flash many many times (depending on how often the data changes, but that could be a ton if a user is modifying relevant things.)

Wondering if there is an analogous solution for react-mathjax, or if anyone else has had this issue and has a good way to handle it.

[chuxusave]

I have the same problem, do you have a solution to handle it?

[nikolas]

Using this react-mathjax fork might solve this problem: https://github.com/wko27/react-mathjax (registered as react-mathjax2 in npm).

[LuisOsta]

@nikolas How did that package solve your problem?