From e61c09ed7331e6ea72e4d9f08c0490713598942d Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 4 Aug 2020 21:56:37 +0200
Subject: 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 | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 web_src/less/features/animations.less

(limited to 'web_src/less/features')

diff --git a/web_src/less/features/animations.less b/web_src/less/features/animations.less
new file mode 100644
index 0000000000..65ff1fef3f
--- /dev/null
+++ b/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;
+}
-- 
cgit v1.2.3