Add loading spinners and mermaid error handling

[silverwind]

• Add loading spinners on editor and mermaid renderers
• Add error handling and inline error box for mermaid
• Fix mermaid rendering by using the .init API

[lafriks]

Could you rename loadingcircle to is-loading?

[silverwind]

I'm kind of wary of using too common classnames because they could clash with other frameworks like swagger-ui that uses .loading. .is-loading is probably fine thought.

[silverwind]

Classes switched.

[lafriks]

Bit off topic... But related, what will happen if mermaid can not render image because of syntax error?

[silverwind]

I think it may throw an JS error, not sure how well that library behaves or if it has a fallback rendering. Looking at GitLab code, they seem to have a .catch handler for such an case.

Edit: Yeah it does throw an error. Will check that later. Probably good to fix this in this PR because otherwise the box would stay loading forever.

[silverwind]

Ready for review again. I went with a inline error block on mermaid errors:

[silverwind]

One more tweak: text is now left-aligned so the ----^ pointers work:

[silverwind]

It seems the way we initialize mermaid using mermaidApi is resulting in many weird/wrong renderings even thought docs say it's the recommended method. mermaid.init seems to produce better renderings, working on using that instead.

[silverwind]

Should be fixed. That API of mermaid is absolutely horrendous, especially its error handling but this seems to produce much better renderings now for me.

[silverwind]

Squashed, update OP and removed a few outdated comments in this PR.

[zeripath]

I still think we'll end up with mermaid being used outside of markdown and will have to move stuff around but that's fine

[silverwind]

Yeah I guess we can move both less and js files around then but the current structure is good enough for markdown-only content like mermaid currently.