From 21c228600a7a69cfea3b7d8af6838bcfda1d7399 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 1 Mar 2022 16:21:22 +0100
Subject: 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.
---
 src/components/Comment/Comment.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

(limited to 'src/components/Comment/Comment.tsx')

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}
           />
-- 
cgit v1.2.3