optimize DeleteCommentModal

apps/app/src/client/components/PageComment.tsx

@@ -23,7 +23,7 @@ import { NotAvailableForGuest } from './NotAvailableForGuest';
 import { NotAvailableIfReadOnlyUserNotAllowedToComment } from './NotAvailableForReadOnlyUser';
 import { Comment } from './PageComment/Comment';
 import { CommentEditor } from './PageComment/CommentEditor';
-import { DeleteCommentModal } from './PageComment/DeleteCommentModal';
+import { DeleteCommentModalLazyLoaded } from './PageComment/DeleteCommentModal';
 import { ReplyComments } from './PageComment/ReplyComments';
 
 import styles from './PageComment.module.scss';
@@ -218,7 +218,7 @@ export const PageComment: FC<PageCommentProps> = memo((props: PageCommentProps):
       </div>
 
       {!isReadOnly && (
-        <DeleteCommentModal
+        <DeleteCommentModalLazyLoaded
           isShown={isDeleteConfirmModalShown}
           comment={commentToBeDeleted}
           errorMessage={errorMessageOnDelete}

apps/app/src/client/components/PageComment/DeleteCommentModal.tsx → apps/app/src/client/components/PageComment/DeleteCommentModal/DeleteCommentModal.tsx

@@ -8,8 +8,8 @@ import {
   Button, Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
 
-import { Username } from '../../../components/User/Username';
-import type { ICommentHasId } from '../../../interfaces/comment';
+import { Username } from '~/components/User/Username';
+import type { ICommentHasId } from '~/interfaces/comment';
 
 import styles from './DeleteCommentModal.module.scss';
 

apps/app/src/client/components/PageComment/DeleteCommentModal/dynamic.tsx

@@ -0,0 +1,15 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '../../../util/use-lazy-loader';
+
+import type { DeleteCommentModalProps } from './DeleteCommentModal';
+
+export const DeleteCommentModalLazyLoaded = (props: DeleteCommentModalProps): JSX.Element => {
+  const DeleteCommentModal = useLazyLoader<DeleteCommentModalProps>(
+    'delete-comment-modal',
+    () => import('./DeleteCommentModal').then(mod => ({ default: mod.DeleteCommentModal })),
+    props.isShown,
+  );
+
+  return DeleteCommentModal != null ? <DeleteCommentModal {...props} /> : <></>;
+};

apps/app/src/client/components/PageComment/DeleteCommentModal/index.ts

@@ -0,0 +1 @@
+export { DeleteCommentModalLazyLoaded } from './dynamic';