commentInput: Ensure react-md-editor is not part of the main chunk

This reduces the main chunk size from 3.65 MB to 2.56 MB. Something about the commit "Use CRACO to workaround CRA #11770" caused several large components to be added to the main.*.js bundle. All suspense elements are *roughly* the same size as the expected text editor box, plus or minus a row. Signed-off-by: Taylor Smock <[email protected]>
hotosm · Apr 20, 2023 · 7450a7a · 7450a7a
1 parent f2ed428
commit 7450a7a
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 82 deletions.
diff --git a/frontend/src/components/comments/commentInput.js b/frontend/src/components/comments/commentInput.js
@@ -18,7 +18,7 @@ import { iconConfig } from './editorIconConfig';
 import messages from './messages';
 import { CurrentUserAvatar } from '../user/avatar';
 
-export const CommentInputField = ({
+function CommentInputField({
   comment,
   setComment,
   contributors,
@@ -29,7 +29,7 @@ export const CommentInputField = ({
   isShowUserPicture = false,
   placeholderMsg = messages.leaveAComment,
   markdownTextareaProps = {},
-}: Object) => {
+}: Object) {
   const token = useSelector((state) => state.auth.token);
   const textareaRef = useRef();
   const isBundle = useRef(false);
@@ -179,4 +179,6 @@ export const CommentInputField = ({
       <FileRejections files={fileRejections} />
     </div>
   );
-};
+}
+
+export default CommentInputField;
diff --git a/frontend/src/components/comments/editorIconConfig.js b/frontend/src/components/comments/editorIconConfig.js
@@ -1,10 +1,18 @@
-import { commands, selectWord } from '@uiw/react-md-editor';
+import {
+  bold,
+  italic,
+  quote,
+  link,
+  unorderedListCommand,
+  selectWord,
+  orderedListCommand,
+} from '@uiw/react-md-editor';
 
 const ICON_SIZE = 14;
 
 export const iconConfig = {
   bold: {
-    ...commands.bold,
+    ...bold,
     icon: (
       <svg role="img" width={ICON_SIZE} height={ICON_SIZE} viewBox="0 0 384 512">
         <path
@@ -15,7 +23,7 @@ export const iconConfig = {
     ),
   },
   italic: {
-    ...commands.italic,
+    ...italic,
     icon: (
       <svg data-name="italic" width={ICON_SIZE} height={ICON_SIZE} role="img" viewBox="0 0 320 512">
         <path
@@ -26,7 +34,7 @@ export const iconConfig = {
     ),
   },
   quote: {
-    ...commands.quote,
+    ...quote,
     icon: (
       <svg width={ICON_SIZE} height={ICON_SIZE} viewBox="0 0 520 520">
         <path
@@ -37,7 +45,7 @@ export const iconConfig = {
     ),
   },
   link: {
-    ...commands.link,
+    ...link,
     icon: (
       <svg data-name="italic" width={ICON_SIZE} height={ICON_SIZE} role="img" viewBox="0 0 520 520">
         <path
@@ -48,7 +56,7 @@ export const iconConfig = {
     ),
   },
   unorderedListCommand: {
-    ...commands.unorderedListCommand,
+    ...unorderedListCommand,
     icon: (
       <svg data-name="unordered-list" width={ICON_SIZE} height={ICON_SIZE} viewBox="0 0 512 512">
         <path
@@ -59,7 +67,7 @@ export const iconConfig = {
     ),
   },
   orderedListCommand: {
-    ...commands.orderedListCommand,
+    ...orderedListCommand,
     icon: (
       <svg
         data-name="ordered-list"

diff --git a/frontend/src/components/projectDetail/questionsAndComments.js b/frontend/src/components/projectDetail/questionsAndComments.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 
@@ -8,13 +8,17 @@ import { useAsync } from '../../hooks/UseAsync';
 import { PaginatorLine } from '../paginator';
 import { Button } from '../button';
 import { Alert } from '../alert';
-import { CommentInputField } from '../comments/commentInput';
 import { MessageStatus } from '../comments/status';
 import { UserAvatar } from '../user/avatar';
 import { htmlFromMarkdown, formatUserNamesToLink } from '../../utils/htmlFromMarkdown';
 import { pushToLocalJSONAPI, fetchLocalJSONAPI } from '../../network/genericJSONRequest';
 
 import './styles.scss';
+import ReactPlaceholder from 'react-placeholder';
+
+const CommentInputField = React.lazy(() =>
+  import('../comments/commentInput' /* webpackChunkName: "commentInput" */),
+);
 
 export const PostProjectComment = ({ projectId, updateComments, contributors }) => {
   const token = useSelector((state) => state.auth.token);
@@ -35,15 +39,17 @@ export const PostProjectComment = ({ projectId, updateComments, contributors })
   return (
     <div className="w-100 cf mh4 pv4 bg-white center shadow-7 ba0 br1 post-comment-ctr">
       <div className={`w-100 h-100`} style={{ position: 'relative', display: 'block' }}>
-        <CommentInputField
-          comment={comment}
-          setComment={setComment}
-          enableHashtagPaste
-          isShowUserPicture
-          isShowFooter
-          isShowTabNavs
-          contributors={contributors?.userContributions?.map((user) => user.username)}
-        />
+        <Suspense fallback={<ReactPlaceholder showLoadingAnimation={true} rows={13} delay={300} />}>
+          <CommentInputField
+            comment={comment}
+            setComment={setComment}
+            enableHashtagPaste
+            isShowUserPicture
+            isShowFooter
+            isShowTabNavs
+            contributors={contributors?.userContributions?.map((user) => user.username)}
+          />
+        </Suspense>
       </div>
 
       <div className="fl w-100 tr pt1 pr0-ns pr1 ml-auto">

diff --git a/frontend/src/components/projectEdit/actionsForm.js b/frontend/src/components/projectEdit/actionsForm.js
@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useContext, useEffect, Suspense } from 'react';
 import { useSelector } from 'react-redux';
 import Popup from 'reactjs-popup';
 import Select from 'react-select';
@@ -13,7 +13,10 @@ import { styleClasses, StateContext } from '../../views/projectEdit';
 import { fetchLocalJSONAPI, pushToLocalJSONAPI } from '../../network/genericJSONRequest';
 import { useFetch } from '../../hooks/UseFetch';
 import { useAsync } from '../../hooks/UseAsync';
-import { CommentInputField } from '../comments/commentInput';
+import ReactPlaceholder from 'react-placeholder';
+const CommentInputField = React.lazy(() =>
+  import('../comments/commentInput' /* webpackChunkName: "commentInput" */),
+);
 
 const ActionStatus = ({ status, action }) => {
   let successMessage = '';
@@ -320,13 +323,17 @@ const MessageContributorsModal = ({ projectId, close }: Object) => {
         {(msg) => {
           return (
             <div className="dib w-100 mt-3">
-              <CommentInputField
-                comment={message}
-                setComment={setMessage}
-                enableHashtagPaste={false}
-                contributors={[]}
-                isShowTabNavs
-              />
+              <Suspense
+                fallback={<ReactPlaceholder showLoadingAnimation={true} rows={10} delay={300} />}
+              >
+                <CommentInputField
+                  comment={message}
+                  setComment={setMessage}
+                  enableHashtagPaste={false}
+                  contributors={[]}
+                  isShowTabNavs
+                />
+              </Suspense>
             </div>
           );
         }}

diff --git a/frontend/src/components/projectEdit/inputLocale.js b/frontend/src/components/projectEdit/inputLocale.js
@@ -1,10 +1,20 @@
-import React, { useState, useEffect, useLayoutEffect, useCallback, useContext } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useLayoutEffect,
+  useCallback,
+  useContext,
+  Suspense,
+} from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
 import { StateContext, styleClasses } from '../../views/projectEdit';
 import { LocaleOption } from './localeOption';
-import { CommentInputField } from '../comments/commentInput';
+import ReactPlaceholder from 'react-placeholder';
+const CommentInputField = React.lazy(() =>
+  import('../comments/commentInput' /* webpackChunkName: "commentInput" */),
+);
 
 export const InputLocale = ({ children, name, type, maxLength, languages }) => {
   const { projectInfo, setProjectInfo, setSuccess, setError } = useContext(StateContext);
@@ -142,19 +152,23 @@ const LocalizedInputField = ({ type, maxLength, name, locale, updateContext }) =
         />
       ) : (
         <div className="w-80">
-          <CommentInputField
-            isShowTabNavs
-            isShowFooter
-            comment={value}
-            setComment={handleMarkdownEditorChange}
-            maxLength={maxLength}
-            markdownTextareaProps={{
-              onBlur: () => updateContext(name, value, locale),
-              maxLength: maxLength || null,
-              name: name,
-            }}
-            placeholderMsg={messages.typeHere}
-          />
+          <Suspense
+            fallback={<ReactPlaceholder showLoadingAnimation={true} rows={11} delay={300} />}
+          >
+            <CommentInputField
+              isShowTabNavs
+              isShowFooter
+              comment={value}
+              setComment={handleMarkdownEditorChange}
+              maxLength={maxLength}
+              markdownTextareaProps={{
+                onBlur: () => updateContext(name, value, locale),
+                maxLength: maxLength || null,
+                name: name,
+              }}
+              placeholderMsg={messages.typeHere}
+            />
+          </Suspense>
         </div>
       )}
       {maxLength && (

diff --git a/frontend/src/components/taskSelection/actionSidebars.js b/frontend/src/components/taskSelection/actionSidebars.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, Suspense } from 'react';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import Popup from 'reactjs-popup';
@@ -26,9 +26,13 @@ import { getEditors } from '../../utils/editorsList';
 import { htmlFromMarkdown } from '../../utils/htmlFromMarkdown';
 import { getTaskContributors } from '../../utils/getTaskContributors';
 import { pushToLocalJSONAPI, fetchLocalJSONAPI } from '../../network/genericJSONRequest';
-import { CommentInputField } from '../comments/commentInput';
 import { useFetchLockedTasks, useClearLockedTasks } from '../../hooks/UseLockedTasks';
 import { useAsync } from '../../hooks/UseAsync';
+import ReactPlaceholder from 'react-placeholder';
+
+const CommentInputField = React.lazy(() =>
+  import('../comments/commentInput' /* webpackChunkName: "commentInput" */),
+);
 
 export function CompletionTabForMapping({
   project,
@@ -247,14 +251,16 @@ export function CompletionTabForMapping({
         <h4 className="ttu blue-grey f6 fw5">
           <FormattedMessage {...messages.comment} />
         </h4>
-        <CommentInputField
-          comment={taskComment}
-          setComment={setTaskComment}
-          contributors={contributors}
-          enableHashtagPaste={true}
-          enableContributorsHashtag
-          isShowTabNavs
-        />
+        <Suspense fallback={<ReactPlaceholder showLoadingAnimation={true} rows={11} delay={300} />}>
+          <CommentInputField
+            comment={taskComment}
+            setComment={setTaskComment}
+            contributors={contributors}
+            enableHashtagPaste={true}
+            enableContributorsHashtag
+            isShowTabNavs
+          />
+        </Suspense>
       </div>
       {directedFrom && (
         <div className="flex items-center">
@@ -610,14 +616,18 @@ const TaskValidationSelector = ({
       {showCommentInput && (
         <>
           <div className="cf w-100 db pt2">
-            <CommentInputField
-              comment={comment}
-              setComment={setComment}
-              contributors={contributors.length ? contributors : contributorsList}
-              enableHashtagPaste
-              enableContributorsHashtag
-              isShowTabNavs
-            />
+            <Suspense
+              fallback={<ReactPlaceholder showLoadingAnimation={true} rows={11} delay={300} />}
+            >
+              <CommentInputField
+                comment={comment}
+                setComment={setComment}
+                contributors={contributors.length ? contributors : contributorsList}
+                enableHashtagPaste
+                enableContributorsHashtag
+                isShowTabNavs
+              />
+            </Suspense>
           </div>
           {isValidatingMultipleTasks && comment && (
             <div className="fw5 tr bb b--grey-light bw1 pb2">

diff --git a/frontend/src/components/taskSelection/taskActivity.js b/frontend/src/components/taskSelection/taskActivity.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import React, { useState, useEffect, useCallback, useMemo, Suspense } from 'react';
 import { useSelector } from 'react-redux';
 
 import { viewport } from '@placemarkio/geo-viewport';
@@ -20,9 +20,13 @@ import { CloseIcon } from '../svgIcons';
 import { ID_EDITOR_URL } from '../../config';
 import { Button, CustomButton } from '../button';
 import { Dropdown } from '../dropdown';
-import { CommentInputField } from '../comments/commentInput';
 
 import './styles.scss';
+import ReactPlaceholder from 'react-placeholder';
+
+const CommentInputField = React.lazy(() =>
+  import('../comments/commentInput' /* webpackChunkName: "commentInput" */),
+);
 
 const PostComment = ({ projectId, taskId, contributors, setCommentPayload }) => {
   const token = useSelector((state) => state.auth.token);
@@ -47,15 +51,17 @@ const PostComment = ({ projectId, taskId, contributors, setCommentPayload }) =>
 
   return (
     <div className="w-100 pt3 ph3-ns ph1 flex flex-column">
-      <CommentInputField
-        comment={comment}
-        setComment={setComment}
-        enableHashtagPaste
-        contributors={contributors}
-        enableContributorsHashtag
-        isShowUserPicture
-        isShowTabNavs
-      />
+      <Suspense fallback={<ReactPlaceholder showLoadingAnimation={true} rows={12} delay={300} />}>
+        <CommentInputField
+          comment={comment}
+          setComment={setComment}
+          enableHashtagPaste
+          contributors={contributors}
+          enableContributorsHashtag
+          isShowUserPicture
+          isShowTabNavs
+        />
+      </Suspense>
       <div className="ml-auto mb5">
         <Button onClick={() => saveComment()} className="bg-red white f6">
           <FormattedMessage {...messages.comment} />