From 12476d8c065945841977ed701de0fda2a2afe312 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Thu, 26 May 2022 00:37:28 +0800
Subject: [PATCH] client: improve style

---
 .../document/comments/comments/Item/index.tsx | 33 +++++++------
 .../components/document/comments/index.tsx    | 10 +---
 .../src/components/document/reader/index.tsx  | 47 ++++++++++++-------
 .../collaboration/index.module.scss           |  2 +-
 .../collaboration/collaboration/index.tsx     |  7 +--
 5 files changed, 54 insertions(+), 45 deletions(-)

diff --git a/packages/client/src/components/document/comments/comments/Item/index.tsx b/packages/client/src/components/document/comments/comments/Item/index.tsx
index a523ae8c..566f77a1 100644
--- a/packages/client/src/components/document/comments/comments/Item/index.tsx
+++ b/packages/client/src/components/document/comments/comments/Item/index.tsx
@@ -65,20 +65,25 @@ export const CommentItem: React.FC<IProps> = ({ comment, replyComment, editComme
 
 export const CommentItemPlaceholder = () => {
   return (
-    <div className={styles.wrap}>
-      <div className={styles.leftWrap}>
-        <Skeleton.Avatar size="small" />
-      </div>
-      <div className={styles.rightWrap}>
-        <header>
-          <Skeleton.Title style={{ width: 120 }} />
-        </header>
-        <main>
-          <div>
-            <Skeleton.Paragraph style={{ width: '100%' }} rows={3} />
+    <Skeleton
+      active
+      placeholder={
+        <div className={styles.wrap}>
+          <div className={styles.leftWrap}>
+            <Skeleton.Avatar size="small" />
           </div>
-        </main>
-      </div>
-    </div>
+          <div className={styles.rightWrap}>
+            <header>
+              <Skeleton.Title style={{ width: 120 }} />
+            </header>
+            <main>
+              <div>
+                <Skeleton.Paragraph style={{ width: '100%' }} rows={3} />
+              </div>
+            </main>
+          </div>
+        </div>
+      }
+    ></Skeleton>
   );
 };
diff --git a/packages/client/src/components/document/comments/index.tsx b/packages/client/src/components/document/comments/index.tsx
index 9bb812b1..e152d9c4 100644
--- a/packages/client/src/components/document/comments/index.tsx
+++ b/packages/client/src/components/document/comments/index.tsx
@@ -1,4 +1,4 @@
-import { Avatar, Banner, Button, Pagination, Space, Typography } from '@douyinfe/semi-ui';
+import { Avatar, Banner, Button, Pagination, Space, Spin, Typography } from '@douyinfe/semi-ui';
 import { DataRender } from 'components/data-render';
 import { useComments } from 'data/comment';
 import { useUser } from 'data/user';
@@ -90,13 +90,7 @@ export const CommentEditor: React.FC<IProps> = ({ documentId }) => {
       <DataRender
         loading={loading}
         error={error}
-        loadingContent={
-          <>
-            {Array.from({ length: 3 }, (_, i) => i).map((i) => (
-              <CommentItemPlaceholder key={i} />
-            ))}
-          </>
-        }
+        loadingContent={null}
         normalContent={() => (
           <>
             {commentsData.total > 0 && (
diff --git a/packages/client/src/components/document/reader/index.tsx b/packages/client/src/components/document/reader/index.tsx
index f73c2f80..12ffc66c 100644
--- a/packages/client/src/components/document/reader/index.tsx
+++ b/packages/client/src/components/document/reader/index.tsx
@@ -1,5 +1,5 @@
 import { IconEdit } from '@douyinfe/semi-icons';
-import { BackTop, Button, Layout, Nav, Skeleton, Space, Tooltip, Typography } from '@douyinfe/semi-ui';
+import { BackTop, Button, Layout, Nav, Skeleton, Space, Spin, Tooltip, Typography } from '@douyinfe/semi-ui';
 import cls from 'classnames';
 import { DataRender } from 'components/data-render';
 import { DocumentCollaboration } from 'components/document/collaboration';
@@ -79,7 +79,6 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
   }, [document]);
 
   const actions = useMemo(() => {
-    console.log({ readable, editable });
     return (
       <Space>
         {document && (
@@ -135,21 +134,35 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
           <div className={cls(styles.editorWrap, editorWrapClassNames)} style={{ fontSize }}>
             <div id="js-reader-container">
               {document && <Seo title={document.title} />}
-              {user && readable && (
-                <CollaborationEditor
-                  editable={false}
-                  user={user}
-                  id={documentId}
-                  type="document"
-                  renderInEditorPortal={renderAuthor}
-                  onAwarenessUpdate={triggerJoinUser}
-                />
-              )}
-              {user && (
-                <div className={styles.commentWrap}>
-                  <CommentEditor documentId={documentId} />
-                </div>
-              )}
+              {user &&
+                (docAuthLoading ? (
+                  <div
+                    style={{
+                      minHeight: 240,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      margin: 'auto',
+                    }}
+                  >
+                    <Spin />
+                  </div>
+                ) : (
+                  <CollaborationEditor
+                    editable={false}
+                    user={user}
+                    id={documentId}
+                    type="document"
+                    renderInEditorPortal={renderAuthor}
+                    onAwarenessUpdate={triggerJoinUser}
+                  />
+                ))}
+              {user &&
+                (docAuthLoading ? null : (
+                  <div className={styles.commentWrap}>
+                    <CommentEditor documentId={documentId} />
+                  </div>
+                ))}
               {!isMobile && authority && authority.editable && container && (
                 <BackTop style={editBtnStyle} onClick={gotoEdit} target={() => container} visibilityHeight={200}>
                   <IconEdit />
diff --git a/packages/client/src/tiptap/editor/collaboration/collaboration/index.module.scss b/packages/client/src/tiptap/editor/collaboration/collaboration/index.module.scss
index 10a6f859..43fdb25c 100644
--- a/packages/client/src/tiptap/editor/collaboration/collaboration/index.module.scss
+++ b/packages/client/src/tiptap/editor/collaboration/collaboration/index.module.scss
@@ -2,7 +2,7 @@
   display: flex;
   width: 100%;
   height: 100%;
-  min-height: 100px;
+  min-height: 240px;
   overflow: hidden;
   flex-direction: column;
 
diff --git a/packages/client/src/tiptap/editor/collaboration/collaboration/index.tsx b/packages/client/src/tiptap/editor/collaboration/collaboration/index.tsx
index fc49d075..e85c7573 100644
--- a/packages/client/src/tiptap/editor/collaboration/collaboration/index.tsx
+++ b/packages/client/src/tiptap/editor/collaboration/collaboration/index.tsx
@@ -98,11 +98,8 @@ export const CollaborationEditor = forwardRef((props: ICollaborationEditorProps,
       <DataRender
         loading={loading}
         loadingContent={
-          <div style={{ width: 174, margin: 'auto' }}>
-            <Spin tip="正在加载中...">
-              {/* FIXME: semi-design 的问题，不加 div，文字会换行! */}
-              <div></div>
-            </Spin>
+          <div style={{ margin: 'auto' }}>
+            <Spin />
           </div>
         }
         error={error}