clean code

packages/app/src/components/PageComment.module.scss

@@ -76,12 +76,11 @@ $bgcolor-global: white;
       visibility: visible;
     }
   }
-}
-
 
-// reply button
-.btn-comment-reply :global {
-  margin-top: 0.5em;
-  border: none;
+  // reply button
+  .btn-comment-reply {
+    margin-top: 0.5em;
+    border: none;
+  }
 }
 

packages/app/src/components/PageComment.tsx

@@ -19,6 +19,7 @@ import { CommentEditor } from './PageComment/CommentEditor';
 import { CommentEditorLazyRenderer } from './PageComment/CommentEditorLazyRenderer';
 import DeleteCommentModal from './PageComment/DeleteCommentModal';
 import { ReplayComments } from './PageComment/ReplayComments';
+import { Skelton } from './Skelton';
 
 import styles from './PageComment.module.scss';
 
@@ -119,13 +120,25 @@ export const PageComment: FC<Props> = memo((props:Props): JSX.Element => {
     });
   }, []);
 
-  if (commentsFromOldest == null || commentsExceptReply == null) return <></>;
+  let commentTitleClasses = 'border-bottom py-3 mb-3';
+  commentTitleClasses = titleAlign != null ? `${commentTitleClasses} text-${titleAlign}` : `${commentTitleClasses} text-center`;
 
-  if (hideIfEmpty && comments?.length === 0) {
-    return <></>;
-  }
-  if (rendererOptions == null || currentPagePath == null || currentPage == null) {
-    return <></>;
+  if (commentsFromOldest == null || commentsExceptReply == null || rendererOptions == null || currentPagePath == null || currentPage == null
+    || (hideIfEmpty && comments?.length === 0)) {
+    return (
+      <>
+        <div className="page-comments-row comment-list mt-5 py-4 d-edit-none d-print-none">
+          <div className="container-lg">
+            <div className={`${styles['page-comments']}`}>
+              <h2 className={commentTitleClasses}><i className="icon-fw icon-bubbles"></i>Comments</h2>
+              <div className="text-muted text-center mt-3">
+                <i className="fa fa-lg fa-spinner fa-pulse mr-1"></i>
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    );
   }
 
   const generateCommentInnerElement = (comment: ICommentHasId) => (
@@ -154,9 +167,6 @@ export const PageComment: FC<Props> = memo((props:Props): JSX.Element => {
     />
   );
 
-  let commentTitleClasses = 'border-bottom py-3 mb-3';
-  commentTitleClasses = titleAlign != null ? `${commentTitleClasses} text-${titleAlign}` : `${commentTitleClasses} text-center`;
-
   return (
     <>
       <div className="page-comments-row comment-list mt-5 py-4 d-edit-none d-print-none">
@@ -185,7 +195,7 @@ export const PageComment: FC<Props> = memo((props:Props): JSX.Element => {
                           outline
                           color="secondary"
                           size="sm"
-                          className={`${styles['btn-comment-reply']}`}
+                          className="btn-comment-reply"
                           onClick={() => {
                             setShowEditorIds(previousState => new Set(previousState.add(comment._id)));
                           }}

packages/app/src/components/PageComment/Comment.module.scss

@@ -49,6 +49,7 @@ $bgcolor-global: white;
   position: relative;
   padding-top: 70px;
   margin-top: -70px;
+  pointer-events: none;
 
   // ユーザー名
   .page-comment-creator {

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

@@ -70,7 +70,7 @@ export const Comment = (props: CommentProps): JSX.Element => {
   };
 
   const getRootClassName = (comment) => {
-    let className = ` ${styles['page-comment']} flex-column`;
+    let className = `${styles['page-comment']} flex-column`;
 
     if (comment.revision === currentRevisionId) {
       className += ' page-comment-current';

packages/app/src/components/PageContentFooter.module.scss

@@ -0,0 +1,17 @@
+@use '~/styles/bootstrap/init' as bs;
+
+$bgcolor-global: white;
+$border-color-theme: bs.$gray-400;
+
+.page-content-footer :global {
+  /*
+  * GROWI page content footer
+  */
+  background-color: darken($bgcolor-global, 2%);
+  border-top: solid 1px transparent;
+  border-top-color: $border-color-theme;
+
+  .page-meta {
+    font-size: 0.95em;
+  }
+}

packages/app/src/components/PageContentFooter.tsx

@@ -6,6 +6,8 @@ import { useSWRxCurrentPage } from '~/stores/page';
 
 import { Skelton } from './Skelton';
 
+import styles from './PageContentFooter.module.scss';
+
 export const PageContentFooter = memo((): JSX.Element => {
 
   const AuthorInfo = dynamic(() => import('./Navbar/AuthorInfo'),
@@ -18,7 +20,7 @@ export const PageContentFooter = memo((): JSX.Element => {
   }
 
   return (
-    <div className="page-content-footer py-4 d-edit-none d-print-none">
+    <div className={`${styles['page-content-footer']} py-4 d-edit-none d-print-none}`}>
       <div className="grw-container-convertible">
         <div className="page-meta">
           <AuthorInfo user={page.creator} date={page.createdAt} mode="create" locate="footer" />