From 972bbf00fa5ea3f9db9ef9eb2195ee6f507f9bcd Mon Sep 17 00:00:00 2001
From: liuhongbo <916196375@qq.com>
Date: Mon, 1 Apr 2024 11:00:17 +0800
Subject: [PATCH] feat: add loading animate

---
 .../components/code-mirror-loading/index.js   | 15 ++++++
 .../components/code-mirror-loading/style.css  | 49 +++++++++++++++++++
 .../src/pages/plain-markdown-editor/index.js  |  3 ++
 3 files changed, 67 insertions(+)
 create mode 100644 frontend/src/components/code-mirror-loading/index.js
 create mode 100644 frontend/src/components/code-mirror-loading/style.css

diff --git a/frontend/src/components/code-mirror-loading/index.js b/frontend/src/components/code-mirror-loading/index.js
new file mode 100644
index 0000000000..94f86dfa0a
--- /dev/null
+++ b/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;
diff --git a/frontend/src/components/code-mirror-loading/style.css b/frontend/src/components/code-mirror-loading/style.css
new file mode 100644
index 0000000000..b806b9718f
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/frontend/src/pages/plain-markdown-editor/index.js b/frontend/src/pages/plain-markdown-editor/index.js
index 9af3cd1831..e5ef98561e 100644
--- a/frontend/src/pages/plain-markdown-editor/index.js
+++ b/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