client: improve style

packages/client/src/components/document/comments/comments/Item/index.tsx

@@ -65,6 +65,9 @@ export const CommentItem: React.FC<IProps> = ({ comment, replyComment, editComme
 
 export const CommentItemPlaceholder = () => {
   return (
+    <Skeleton
+      active
+      placeholder={
         <div className={styles.wrap}>
           <div className={styles.leftWrap}>
             <Skeleton.Avatar size="small" />
@@ -80,5 +83,7 @@ export const CommentItemPlaceholder = () => {
             </main>
           </div>
         </div>
+      }
+    ></Skeleton>
   );
 };

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={
+        loadingContent={null}
-          <>
-            {Array.from({ length: 3 }, (_, i) => i).map((i) => (
-              <CommentItemPlaceholder key={i} />
-            ))}
-          </>
-        }
         normalContent={() => (
           <>
             {commentsData.total > 0 && (

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,7 +134,20 @@ 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 && (
+              {user &&
+                (docAuthLoading ? (
+                  <div
+                    style={{
+                      minHeight: 240,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      margin: 'auto',
+                    }}
+                  >
+                    <Spin />
+                  </div>
+                ) : (
                   <CollaborationEditor
                     editable={false}
                     user={user}
@@ -144,12 +156,13 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
                     renderInEditorPortal={renderAuthor}
                     onAwarenessUpdate={triggerJoinUser}
                   />
-              )}
+                ))}
-              {user && (
+              {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 />

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;
 

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' }}>
+          <div style={{ margin: 'auto' }}>
-            <Spin tip="正在加载中...">
+            <Spin />
-              {/* FIXME: semi-design 的问题，不加 div，文字会换行! */}
-              <div></div>
-            </Spin>
           </div>
         }
         error={error}