Mermaid diagrams are not rendered when adding a new comment on the diffs page
The following discussion from !107218 should be addressed: - [ ] @djadmin started a [discussion](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/107218#note_1214208281): (+1 comment) > **Bug** (possibly unrelated to this MR change): When switching between the diff page and the overview page, the GFM mermaid diagrams are not getting rendered for notes. I suspect this is unrelated but want to check with you first. > > > > ![2022-12-19_14.34.22](/uploads/ece6e680f98f963ddce40714171ef752/2022-12-19_14.34.22.gif) This happens because we sort of mimic SPA behaviour here and hide the Overview page with `display: none`. So when we add the comment `renderGFM` is actually called twice: for the Changes and the Overview tab. The mermaid rendering checks if the element is visible and in this case it is not. We should handle this with an `IntersectionObserver`. ## How to reproduce 1. Open any MR Overview page 2. Switch to the Changes page 3. Add a new diff comment with a mermaid diagram 4. Switch to the Overview page The mermaid diagram should be rendered correctly. Example comment: ```` ```hello``` ```mermaid graph LR; A --> B; ``` ````
issue