Im using dcc.Markdown in the context of an app for talking with a chatbot (as many people do).
The problem occurs with many browsers (Chrome, Safari, Firefox).
Im asking the bot to give me nice and complex formulas and I get nicely rendered results in my Chatbot Window. In the inspector I can see, that MathJax did the rendering on the browser side (javascript).
When I have more than one TextArea (because of my dialogue) it seems that rendering formulas starts re-rendering formulas starts re-rendering formulas … and so on => the devils circle.
The inspector of the browser shows continuous re-rendering without touching the browser at all.
As result CPU consumption goes up and after some seconds the App crashes.
The problem occurs completely on the browser side.
I do not add any Javascript Code (e.g. custom.js).
It happens always after approx 20 to 30 formulas in 2-3 TextAreas.
My Code in callbacks.py:
response_html = html.Div(
dcc.Markdown(
“thinking …”,
mathjax=True,
dangerously_allow_html=True, # HTML sicher erlauben
link_target=“_blank”, # Links öffnen in neuem Tab
id={“type”: “markdown-content”, “index”: response_id}, # ID für Update
),
id={“type”: “markdown”, “index”: response_id},
style={
“width”: “100%”,
“borderRadius”: “8px”,
“padding”: “10px”,
“backgroundColor”: “#d9e0f3”, # Color for Chat Output
“border”: “1px solid #ccc”,
“flexShrink”: “0”,
“margin-bottom”: “25px”,
},
)
chat_children.insert(0, response_html)
I have already tried hundreds of variants to avoid this re-rendering … no success.
I think the error is in the react code for dcc.Markdown.
It couldl be helpful to freeze rendering of older text areas or so.
Anyway, I hope someone has an idea
Cheers, Welf