refactor: import comment form dynamically when reply to a comment

The comment form is displayed only if an user click on the reply button
so importing it dynamically should improve performances.

2 files changed, 27 insertions, 16 deletions

diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx
index 7215afe..0371288 100644
--- a/src/components/Comment/Comment.tsx
+++ b/src/components/Comment/Comment.tsx
@@ -1,17 +1,25 @@
 import { Button } from '@components/Buttons';
-import CommentForm from '@components/CommentForm/CommentForm';
+import Spinner from '@components/Spinner/Spinner';
 import { Comment as CommentData } from '@ts/types/comments';
 import { settings } from '@utils/config';
 import { getFormattedDate } from '@utils/helpers/format';
+import dynamic from 'next/dynamic';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
-import { useEffect, useRef, useState } from 'react';
+import { useState } from 'react';
 import { useIntl } from 'react-intl';
 import { Comment as CommentSchema, WithContext } from 'schema-dts';
 import styles from './Comment.module.scss';
 
+const DynamicCommentForm = dynamic(
+  () => import('@components/CommentForm/CommentForm'),
+  {
+    loading: () => <Spinner />,
+  }
+);
+
 const Comment = ({
   articleId,
   comment,
@@ -25,11 +33,6 @@ const Comment = ({
   const router = useRouter();
   const locale = router.locale ? router.locale : settings.locales.defaultLocale;
   const [shouldOpenForm, setShouldOpenForm] = useState<boolean>(false);
-  const firstFieldRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    firstFieldRef.current && firstFieldRef.current.focus();
-  });
 
   const getCommentAuthor = () => {
     return comment.author.url ? (
@@ -113,8 +116,7 @@ const Comment = ({
           )}
         </article>
         {shouldOpenForm && (
-          <CommentForm
-            ref={firstFieldRef}
+          <DynamicCommentForm
             articleId={articleId}
             parentId={comment.commentId}
           />
diff --git a/src/components/CommentForm/CommentForm.tsx b/src/components/CommentForm/CommentForm.tsx
index c409d04..eb7c100 100644
--- a/src/components/CommentForm/CommentForm.tsx
+++ b/src/components/CommentForm/CommentForm.tsx
@@ -4,14 +4,17 @@ import Notice from '@components/Notice/Notice';
 import Spinner from '@components/Spinner/Spinner';
 import { createComment } from '@services/graphql/mutations';
 import { NoticeType } from '@ts/types/app';
-import { ForwardedRef, forwardRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './CommentForm.module.scss';
 
-const CommentForm = (
-  { articleId, parentId = 0 }: { articleId: number; parentId?: number },
-  ref: ForwardedRef<HTMLInputElement>
-) => {
+const CommentForm = ({
+  articleId,
+  parentId = 0,
+}: {
+  articleId: number;
+  parentId?: number;
+}) => {
   const intl = useIntl();
   const [name, setName] = useState<string>('');
   const [email, setEmail] = useState<string>('');
@@ -20,6 +23,12 @@ const CommentForm = (
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
   const [notice, setNotice] = useState<string>();
   const [noticeType, setNoticeType] = useState<NoticeType>('success');
+  const nameFieldRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (parentId === 0) return;
+    nameFieldRef.current && nameFieldRef.current.focus();
+  });
 
   const resetForm = () => {
     setName('');
@@ -154,7 +163,7 @@ const CommentForm = (
             value={name}
             setValue={setName}
             required={true}
-            ref={ref}
+            ref={nameFieldRef}
           />
         </FormItem>
         <FormItem>
@@ -216,4 +225,4 @@ const CommentForm = (
   );
 };
 
-export default forwardRef(CommentForm);
+export default CommentForm;