perf(content-answers): lazy load content answers in preview (#3720)

* perf(content-answers): lazy load content answers in preview

* fix: flow ignore for TS component

Author: tjuanitas

src/elements/common/content-answers/ContentAnswers.tsx

@@ -4,18 +4,20 @@ import getProp from 'lodash/get';
 import ContentAnswersModal, { ExternalProps as ContentAnswersModalExternalProps } from './ContentAnswersModal';
 import ContentAnswersOpenButton from './ContentAnswersOpenButton';
 // @ts-ignore: no ts definition
-// eslint-disable-next-line import/named
 import { BoxItem } from '../../common/types/core';
 
 interface ExternalProps extends ContentAnswersModalExternalProps {
     show?: boolean;
 }
 
 interface Props {
+    className?: string;
     file: BoxItem;
 }
 
-const ContentAnswers = ({ file, onAsk, onRequestClose, ...rest }: ContentAnswersModalExternalProps & Props) => {
+const ContentAnswers = (props: ContentAnswersModalExternalProps & Props) => {
+    const { className = '', file, onAsk, onRequestClose, ...rest } = props;
+
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [hasQuestions, setHasQuestions] = useState(false);
     const [isHighlighted, setIsHighlighted] = useState(false);
@@ -44,7 +46,7 @@ const ContentAnswers = ({ file, onAsk, onRequestClose, ...rest }: ContentAnswers
 
     const currentExtension = getProp(file, 'extension');
     return (
-        <div className="be-ContentAnswers">
+        <div className={`be-ContentAnswers ${className}`}>
             <ContentAnswersOpenButton
                 fileExtension={currentExtension}
                 isHighlighted={isHighlighted}

src/elements/common/content-answers/ContentAnswersModal.tsx

@@ -15,12 +15,10 @@ import { DOCUMENT_SUGGESTED_QUESTIONS, SPREADSHEET_FILE_EXTENSIONS } from './con
 import withCurrentUser from '../current-user';
 
 // @ts-ignore: no ts definition
-// eslint-disable-next-line import/named
 import { BoxItem, User } from '../../../common/types/core';
 // @ts-ignore: no ts definition
 import APIFactory from '../../../api';
 // @ts-ignore: no ts definition
-// eslint-disable-next-line import/named
 import { ElementsXhrError } from '../../common/types/api';
 
 import messages from './messages';

src/elements/content-preview/preview-header/PreviewHeader.js

@@ -10,8 +10,6 @@ import type { IntlShape } from 'react-intl';
 import classNames from 'classnames';
 import getProp from 'lodash/get';
 import AsyncLoad from '../../common/async-load';
-// $FlowFixMe typescript component
-import ContentAnswers from '../../common/content-answers';
 import FileInfo from './FileInfo';
 import IconClose from '../../../icons/general/IconClose';
 import IconDownload from '../../../icons/general/IconDownloadSolid';
@@ -42,6 +40,10 @@ type Props = {
     token: ?string,
 };
 
+const LoadableContentAnswers = AsyncLoad({
+    // $FlowFixMe TypeScript component
+    loader: () => import(/* webpackMode: "lazy", webpackChunkName: "content-answers" */ '../../common/content-answers'),
+});
 const LoadableContentOpenWith = AsyncLoad({
     loader: () => import(/* webpackMode: "lazy", webpackChunkName: "content-open-with" */ '../../content-open-with'),
 });
@@ -101,7 +103,13 @@ const PreviewHeader = ({
                                     {...contentOpenWithProps}
                                 />
                             )}
-                            {shouldRenderAnswers && <ContentAnswers file={file} {...contentAnswersProps} />}
+                            {shouldRenderAnswers && (
+                                <LoadableContentAnswers
+                                    className="bcpr-PreviewHeader-contentAnswers"
+                                    file={file}
+                                    {...contentAnswersProps}
+                                />
+                            )}
                             {canAnnotate && (
                                 <>
                                     <PlainButton

src/elements/content-preview/preview-header/PreviewHeader.scss

@@ -89,6 +89,12 @@
 .bcpr-PreviewHeader-controls {
     display: flex;
 
+    .bcpr-PreviewHeader-contentAnswers {
+        display: flex;
+        align-items: center;
+        padding: 0 5px;
+    }
+
     .be & .bcpr-bcow-btn {
         margin: 0 10px 0 0;
         padding: 0 5px;

src/elements/content-preview/preview-header/__tests__/PreviewHeader.test.js

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
-
-import ContentAnswers from '../../../common/content-answers';
 import PreviewHeader from '..';
 
 describe('elements/content-preview/preview-header/PreviewHeader', () => {
@@ -31,7 +29,7 @@ describe('elements/content-preview/preview-header/PreviewHeader', () => {
         const contentAnswersProps = { show };
         const wrapper = getWrapper({ contentAnswersProps, file });
 
-        expect(wrapper.exists(ContentAnswers)).toBe(expected);
+        expect(wrapper.exists('.bcpr-PreviewHeader-contentAnswers')).toBe(expected);
     });
 
     it('should render ContentAnswers correctly and provided the correct props', () => {
@@ -41,7 +39,7 @@ describe('elements/content-preview/preview-header/PreviewHeader', () => {
             contentAnswersProps,
             file,
         });
-        expect(wrapper.find(ContentAnswers).prop('file')).toBe(file);
+        expect(wrapper.find('.bcpr-PreviewHeader-contentAnswers').prop('file')).toBe(file);
     });
 
     test.each([