Mermaid diagrams are not rendered when adding a new comment on the diffs page

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

The following discussion from !107218 (merged) should be addressed:

  • @djadmin started a discussion: (+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

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;
```
Edited by 🤖 GitLab Bot 🤖