feat: add loading animate

frontend/src/components/code-mirror-loading/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import './style.css';
+
+class CodeMirrorLoading extends React.Component {
+  render() {
+    return (
+      <div className="empty-loading-page">
+        <div className="lds-ripple page-centered"><div></div><div></div></div>
+      </div>
+    );
+  }
+}
+
+export default CodeMirrorLoading;

frontend/src/components/code-mirror-loading/style.css

@@ -0,0 +1,49 @@
+.empty-loading-page {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+}
+
+.page-centered {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  /* bring your own prefixes */
+  transform: translate(-50%, -50%);
+}
+
+.lds-ripple {
+  display: inline-block;
+  position: relative;
+  width: 64px;
+  height: 64px;
+}
+
+.lds-ripple div {
+  position: absolute;
+  border: 4px solid #eb8205;
+  opacity: 1;
+  border-radius: 50%;
+  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+
+.lds-ripple div:nth-child(2) {
+  animation-delay: -0.5s;
+}
+
+@keyframes lds-ripple {
+  0% {
+    top: 28px;
+    left: 28px;
+    width: 0;
+    height: 0;
+    opacity: 1;
+  }
+  100% {
+    top: -1px;
+    left: -1px;
+    width: 58px;
+    height: 58px;
+    opacity: 0;
+  }
+}

frontend/src/pages/plain-markdown-editor/index.js

@@ -9,6 +9,7 @@ import editorApi from '../markdown-editor/editor-api';
 import { getPlainOptions } from './helper';
 import { gettext } from '../../utils/constants';
 import toaster from '../../components/toast';
+import CodeMirrorLoading from '../../components/code-mirror-loading';
 
 import './style.css';
 import '../markdown-editor/css/markdown-editor.css';
@@ -193,6 +194,8 @@ const PlainMarkdownEditor = (props) => {
 
   const ignoreCallBack = useCallback(() => void 0, []);
 
+  if (options.loading) return <CodeMirrorLoading />;
+
   return (
     <>
       <HeaderToolbar