From be918c34d09264fbe3b80506c8204d8af034a17e Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Fri, 19 Mar 2021 09:10:37 +0800
Subject: feat: Add markdown posting indicator.

---
 .../app/views/timeline-common/MarkdownPostEdit.tsx | 48 +++++++++++++---------
 1 file changed, 28 insertions(+), 20 deletions(-)

(limited to 'FrontEnd/src')

diff --git a/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx b/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx
index fb38d2f7..f30e960b 100644
--- a/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx
+++ b/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import { Form } from "react-bootstrap";
+import clsx from "clsx";
+import { Form, Spinner } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { Prompt } from "react-router";
 
@@ -100,24 +101,28 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({
         style={style}
         pageContainerClassName="py-2"
         actions={
-          <>
-            <FlatButton
-              className="mr-2"
-              variant="danger"
-              onClick={() => {
-                if (canLeave) {
-                  onClose();
-                } else {
-                  setShowLeaveConfirmDialog(true);
-                }
-              }}
-            >
-              {t("operationDialog.cancel")}
-            </FlatButton>
-            <FlatButton onClick={send} disabled={canLeave}>
-              {t("timeline.send")}
-            </FlatButton>
-          </>
+          process ? (
+            <Spinner variant="primary" animation="border" size="sm" />
+          ) : (
+            <>
+              <FlatButton
+                className="mr-2"
+                variant="danger"
+                onClick={() => {
+                  if (canLeave) {
+                    onClose();
+                  } else {
+                    setShowLeaveConfirmDialog(true);
+                  }
+                }}
+              >
+                {t("operationDialog.cancel")}
+              </FlatButton>
+              <FlatButton onClick={send} disabled={canLeave}>
+                {t("timeline.send")}
+              </FlatButton>
+            </>
+          )
         }
         pages={[
           {
@@ -149,7 +154,10 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({
                       className="timeline-markdown-post-edit-image"
                     />
                     <i
-                      className="bi-trash text-danger icon-button timeline-markdown-post-edit-image-delete-button"
+                      className={clsx(
+                        "bi-trash text-danger icon-button timeline-markdown-post-edit-image-delete-button",
+                        process && "d-none"
+                      )}
                       onClick={() => {
                         getBuilder().deleteImage(index);
                       }}
-- 
cgit v1.2.3