Master

app/components/review-wizard/HTMLPreview.jsx

@@ -34,15 +34,34 @@ class HTMLPreview extends React.Component {
   }
   componentDidUpdate(prevProps, prevState) {
     if (this.props.loaded && this.div) {
+      // Check if completely loaded — special check for math
       if (prevState.html === null && this.state.html !== null) {
-        this.props.loaded(true)
+        const math = this.state.html.lastIndexOf('mathjax')
+        if (math > 0) {
+          const mathLoc = this.state.html.indexOf('id="', math)
+          const idLoc = mathLoc + 4
+          const lastMath = this.state.html.slice(
+            idLoc,
+            this.state.html.indexOf('"', idLoc),
+          )
+          this.div.lastMath = lastMath
+        } else {
+          this.props.loaded(true)
+        }
       }
     }
   }
+  mathComplete = id => {
+    // Check if completely loaded — check if final math is displayed
+    if (id === this.div.lastMath) {
+      setTimeout(() => this.props.loaded(true), 350)
+    }
+  }
   setRef = div => {
     this.div = div
   }
   render() {
+    const { mathComplete } = this
     return (
       <div id="html-preview" ref={this.setRef}>
         {this.props.xml ? (
@@ -59,7 +78,14 @@ class HTMLPreview extends React.Component {
                 node.attribs.class === 'f mathjax mml-math'
               ) {
                 return (
-                  <MathJax key={node.attribs.id} math={node.children[0].data} />
+                  <MathJax
+                    id={node.attribs.id}
+                    key={node.attribs.id}
+                    math={node.children[0].data}
+                    onDisplay={() => mathComplete(node.attribs.id)}
+                    style={node.attribs.style}
+                    wrapperTag="span"
+                  />
                 )
               }
             },