clean code

packages/app/src/components/Comments.tsx

@@ -3,16 +3,26 @@ import React from 'react';
 import { IRevisionHasId } from '@growi/core';
 import dynamic from 'next/dynamic';
 
-import { PageComment } from '~/components/PageComment';
+import { PageCommentProps } from '~/components/PageComment';
 import { useSWRxPageComment } from '~/stores/comment';
 import { useIsTrashPage } from '~/stores/page';
 
 import { useCurrentUser } from '../stores/context';
 
 import { CommentEditorProps } from './PageComment/CommentEditor';
+import { PageCommentSkeleton } from './PageCommentSkeleton';
+import { Skeleton } from './Skeleton';
 
+import styles from './PageContentFooter.module.scss';
 
-const CommentEditor = dynamic<CommentEditorProps>(() => import('./PageComment/CommentEditor').then(mod => mod.CommentEditor), { ssr: false });
+const PageComment = dynamic<PageCommentProps>(() => import('~/components/PageComment').then(mod => mod.PageComment), {
+  ssr: false,
+  // loading: () => <PageCommentSkeleton />,
+});
+const CommentEditor = dynamic<CommentEditorProps>(() => import('./PageComment/CommentEditor').then(mod => mod.CommentEditor), {
+  ssr: false,
+  // loading: () => <Skeleton additionalClass={`${styles['page-content-footer-skeleton']} mb-3`}/>,
+});
 
 
 type CommentsProps = {

packages/app/src/components/PageComment.tsx

@@ -3,7 +3,6 @@ import React, {
 } from 'react';
 
 import { IRevisionHasId, isPopulated, getIdForRef } from '@growi/core';
-import dynamic from 'next/dynamic';
 import { Button } from 'reactstrap';
 
 import { toastError } from '~/client/util/apiNotification';
@@ -15,18 +14,12 @@ import { ICommentHasId, ICommentHasIdList } from '../interfaces/comment';
 import { useSWRxPageComment } from '../stores/comment';
 
 import { Comment } from './PageComment/Comment';
-import { CommentEditorProps } from './PageComment/CommentEditor';
-import { DeleteCommentModalProps } from './PageComment/DeleteCommentModal';
+import { CommentEditor } from './PageComment/CommentEditor';
+import { DeleteCommentModal } from './PageComment/DeleteCommentModal';
 import { ReplyComments } from './PageComment/ReplyComments';
-import { PageCommentSkeleton } from './PageCommentSkeleton';
 
 import styles from './PageComment.module.scss';
 
-const CommentEditor = dynamic<CommentEditorProps>(() => import('./PageComment/CommentEditor').then(mod => mod.CommentEditor), { ssr: false });
-const DeleteCommentModal = dynamic<DeleteCommentModalProps>(
-  () => import('./PageComment/DeleteCommentModal').then(mod => mod.DeleteCommentModal), { ssr: false },
-);
-
 export const ROOT_ELEM_ID = 'page-comments' as const;
 
 // Always render '#page-comments' for MutationObserver of SearchResultContent
@@ -124,7 +117,6 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
       return <PageCommentRoot />;
     }
     return (
-      // <PageCommentSkeleton commentTitleClasses={commentTitleClasses}/>
       <></>
     );
   }

packages/app/src/components/PageComment/Comment.tsx

@@ -4,7 +4,6 @@ import { IUser, pathUtils } from '@growi/core';
 import { UserPicture } from '@growi/ui';
 import { format } from 'date-fns';
 import { useTranslation } from 'next-i18next';
-import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import { UncontrolledTooltip } from 'reactstrap';
 import urljoin from 'url-join';
@@ -18,13 +17,10 @@ import RevisionRenderer from '../Page/RevisionRenderer';
 import { Username } from '../User/Username';
 
 import { CommentControl } from './CommentControl';
-import { CommentEditorProps } from './CommentEditor';
+import { CommentEditor } from './CommentEditor';
 
 import styles from './Comment.module.scss';
 
-
-const CommentEditor = dynamic<CommentEditorProps>(() => import('./CommentEditor').then(mod => mod.CommentEditor), { ssr: false });
-
 type CommentProps = {
   comment: ICommentHasId,
   rendererOptions: RendererOptions,

packages/app/src/components/PageCommentSkeleton.tsx

@@ -22,8 +22,8 @@ export const PageCommentSkeleton = (props: PageCommentSkeletonProps): JSX.Elemen
       <div className={`${styles['page-comment-styles']} page-comments-row comment-list`}>
         <div className="container-lg">
           <div className="page-comments">
-            <h2 className={commentTitleClasses}><i className="icon-fw icon-bubbles"></i>Comments</h2>
-            <div className="page-comments-list" id="page-comments-list">
+            <h2 className="border-bottom py-3 mb-3"><i className="icon-fw icon-bubbles"></i>Comments</h2>
+            {/* <div className="page-comments-list" id="page-comments-list">
               <div className={`${CommentStyles['comment-styles']} page-comment-thread pb-5  page-comment-thread-no-replies`}>
                 <div className='page-comment flex-column'>
                   <div className='page-commnet-writer'>
@@ -41,15 +41,15 @@ export const PageCommentSkeleton = (props: PageCommentSkeletonProps): JSX.Elemen
                   <Skeleton additionalClass="page-comment-button-skeleton btn btn-outline-secondary btn-sm grw-skeleton" />
                 </div>
               </div>
-            </div>
-            <div className={`${CommentEditorStyles['comment-editor-styles']} form page-comment-form`}>
+            </div> */}
+            {/* <div className={`${CommentEditorStyles['comment-editor-styles']} form page-comment-form`}>
               <div className='comment-form'>
                 <div className='comment-form-user'>
                   <Skeleton additionalClass='rounded-circle picture' roundedPill />
                 </div>
                 <Skeleton additionalClass="page-comment-commenteditorlazyrenderer-body-skeleton grw-skeleton" />
               </div>
-            </div>
+            </div> */}
           </div>
         </div>
       </div>