Add loading spinners and mermaid error handling (#12358)

- 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

web_src/less/features/animations.less

@@ -0,0 +1,34 @@
+@keyframes isloadingspin {
+    0% { transform: translate(-50%, -50%) rotate(0deg); }
+    100% { transform: translate(-50%, -50%) rotate(360deg); }
+}
+
+.is-loading {
+    background: transparent !important;
+    color: transparent !important;
+    border: transparent !important;
+    pointer-events: none !important;
+    position: relative !important;
+    overflow: hidden !important;
+}
+
+.is-loading:after {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 4rem;
+    height: 4rem;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    animation: isloadingspin 500ms infinite linear;
+    border-width: 4px;
+    border-style: solid;
+    border-color: #ececec #ececec #666 #666;
+    border-radius: 100%;
+}
+
+.markdown pre.is-loading,
+.editor-loading.is-loading {
+    height: 12rem;
+}