update PageCommentSkelton

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

@@ -14,6 +14,31 @@
   }
 }
 
+// TODO: Refacotr Soft-coding
+.page-comment-comment-body-skelton :global {
+  position: relative;
+  height: 66px;
+  padding: 1em;
+  margin-left: 4.5em;
+  @include bs.media-breakpoint-down(xs) {
+    margin-left: 3.5em;
+  }
+}
+
+.page-comment-replycomments-body-skelton :global{
+  position: relative;
+  height: 66px;
+  padding: 1em;
+  margin-left: 4.5em;
+}
+
+.page-comment-button-skelton :global {
+  width: 70.0167px;
+  height: 26.3833px;
+  margin-top: 0.5em;
+  border: none;
+}
+
 .page-comment-commenteditorlazyrenderer-body-skelton :global {
   position: relative;
   padding: 2.258rem 2rem;

packages/app/src/components/PageComment.tsx

@@ -19,11 +19,12 @@ import { CommentEditorProps } from './PageComment/CommentEditor';
 import { CommentEditorLazyRenderer } from './PageComment/CommentEditorLazyRenderer';
 import { DeleteCommentModal } from './PageComment/DeleteCommentModal';
 import { ReplyComments } from './PageComment/ReplyComments';
-import { Skelton } from './Skelton';
+// import { Skelton } from './Skelton';
+import { PageCommentSkelton } from './PageCommentSkelton';
 
 import styles from './PageComment.module.scss';
-import CommentStyles from './PageComment/Comment.module.scss';
-import CommentEditorStyles from './PageComment/CommentEditor.module.scss';
+// import CommentStyles from './PageComment/Comment.module.scss';
+// import CommentEditorStyles from './PageComment/CommentEditor.module.scss';
 
 
 // TODO: Update Skelton
@@ -139,43 +140,7 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
       return <></>;
     }
     return (
-      <>
-        {/* TODO: Check the comment.html CSS */}
-        <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">
-                <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'>
-                      <Skelton additionalClass='rounded-circle picture' roundedPill />
-                    </div>
-                    <Skelton additionalClass={`${styles['page-comment-comment-body-skelton']} grw-skelton`} />
-                  </div>
-                  <div className='page-comment flex-column ml-4 ml-sm-5 mr-3'>
-                    <div className='page-commnet-writer mt-3'>
-                      <Skelton additionalClass='rounded-circle picture' roundedPill />
-                    </div>
-                    <Skelton additionalClass={`${styles['page-comment-comment-body-skelton']} grw-skelton mt-3`} />
-                  </div>
-                  <div className="text-right">
-                    <Skelton additionalClass={`${styles['page-comment-button-skelton']} btn btn-outline-secondary btn-sm grw-skelton`} />
-                  </div>
-                </div>
-              </div>
-              <div className={`${CommentEditorStyles['comment-editor-styles']} form page-comment-form`}>
-                <div className='comment-form'>
-                  <div className='comment-form-user'>
-                    <Skelton additionalClass='rounded-circle picture' roundedPill />
-                  </div>
-                  <Skelton additionalClass={`${styles['page-comment-comment-body-skelton']} grw-skelton`} />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </>
+      <PageCommentSkelton commentTitleClasses={commentTitleClasses}/>
     );
   }
 
@@ -207,7 +172,7 @@ export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps):
 
   return (
     <>
-      {/* ToDO: Check the comment.html CSS */}
+      {/* TODO: Check the comment.html CSS */}
       <div className={`${styles['page-comment-styles']} page-comments-row comment-list`}>
         <div className="container-lg">
           <div className="page-comments">

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

@@ -5,12 +5,25 @@ import dynamic from 'next/dynamic';
 import { RendererOptions } from '~/services/renderer/renderer';
 
 import { useSWRxPageComment } from '../../stores/comment';
+import { Skelton } from '../Skelton';
 
 import { CommentEditorProps } from './CommentEditor';
 
-// TODO: Update Skelton
-const CommentEditor = dynamic<CommentEditorProps>(() => import('./CommentEditor').then(mod => mod.CommentEditor), { ssr: false });
-
+import styles from '../PageComment.module.scss';
+import CommentEditorStyles from './CommentEditor.module.scss';
+
+const CommentEditor = dynamic<CommentEditorProps>(() => import('./CommentEditor').then(mod => mod.CommentEditor),
+  {
+    ssr: false,
+    loading: () => <div className={`${CommentEditorStyles['comment-editor-styles']} form page-comment-form`}>
+      <div className='comment-form'>
+        <div className='comment-form-user'>
+          <Skelton additionalClass='rounded-circle picture' roundedPill />
+        </div>
+        <Skelton additionalClass={`${styles['page-comment-commenteditorlazyrenderer-body-skelton']} grw-skelton`} />
+      </div>
+    </div>,
+  });
 
 type Props = {
   pageId?: string,

packages/app/src/components/PageCommentSkelton.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { Skelton } from './Skelton';
+
+import styles from './PageComment.module.scss';
+import CommentStyles from './PageComment/Comment.module.scss';
+import CommentEditorStyles from './PageComment/CommentEditor.module.scss';
+
+type PageCommentSkeltonProps = {
+  commentTitleClasses?: string,
+  roundedPill?: boolean,
+}
+
+export const PageCommentSkelton = (props: PageCommentSkeltonProps): JSX.Element => {
+  const {
+    commentTitleClasses,
+  } = props;
+
+  return (
+    <>
+      {/* TODO: Check the comment.html CSS */}
+      <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">
+              <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'>
+                    <Skelton additionalClass='rounded-circle picture' roundedPill />
+                  </div>
+                  <Skelton additionalClass={`${styles['page-comment-comment-body-skelton']} grw-skelton`} />
+                </div>
+                <div className='page-comment flex-column ml-4 ml-sm-5 mr-3'>
+                  <div className='page-commnet-writer mt-3'>
+                    <Skelton additionalClass='rounded-circle picture' roundedPill />
+                  </div>
+                  <Skelton additionalClass={`${styles['page-comment-comment-body-skelton']} grw-skelton mt-3`} />
+                </div>
+                <div className="text-right">
+                  <Skelton additionalClass={`${styles['page-comment-button-skelton']} btn btn-outline-secondary btn-sm grw-skelton`} />
+                </div>
+              </div>
+            </div>
+            <div className={`${CommentEditorStyles['comment-editor-styles']} form page-comment-form`}>
+              <div className='comment-form'>
+                <div className='comment-form-user'>
+                  <Skelton additionalClass='rounded-circle picture' roundedPill />
+                </div>
+                <Skelton additionalClass={`${styles['page-comment-commenteditorlazyrenderer-body-skelton']} grw-skelton`} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};