From ec115f749fea1c545663888c8d2cfc0bd3cfa514 Mon Sep 17 00:00:00 2001
From: Trevor <7311041+tjuanitas@users.noreply.github.com>
Date: Mon, 21 Oct 2024 10:33:38 -0700
Subject: [PATCH] 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
---
 .../common/content-answers/ContentAnswers.tsx      |  8 +++++---
 .../common/content-answers/ContentAnswersModal.tsx |  2 --
 .../preview-header/PreviewHeader.js                | 14 +++++++++++---
 .../preview-header/PreviewHeader.scss              |  6 ++++++
 .../preview-header/__tests__/PreviewHeader.test.js |  6 ++----
 5 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/elements/common/content-answers/ContentAnswers.tsx b/src/elements/common/content-answers/ContentAnswers.tsx
index 9080e8b20b..a25aad94cf 100644
--- a/src/elements/common/content-answers/ContentAnswers.tsx
+++ b/src/elements/common/content-answers/ContentAnswers.tsx
@@ -4,7 +4,6 @@ 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 {
@@ -12,10 +11,13 @@ interface ExternalProps extends ContentAnswersModalExternalProps {
 }
 
 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}
diff --git a/src/elements/common/content-answers/ContentAnswersModal.tsx b/src/elements/common/content-answers/ContentAnswersModal.tsx
index 5dec5ae0d0..3de8a65fc7 100644
--- a/src/elements/common/content-answers/ContentAnswersModal.tsx
+++ b/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';
diff --git a/src/elements/content-preview/preview-header/PreviewHeader.js b/src/elements/content-preview/preview-header/PreviewHeader.js
index b87ddf78de..e199c6c782 100644
--- a/src/elements/content-preview/preview-header/PreviewHeader.js
+++ b/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
diff --git a/src/elements/content-preview/preview-header/PreviewHeader.scss b/src/elements/content-preview/preview-header/PreviewHeader.scss
index ec807922cf..97f1e6f4bd 100644
--- a/src/elements/content-preview/preview-header/PreviewHeader.scss
+++ b/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;
diff --git a/src/elements/content-preview/preview-header/__tests__/PreviewHeader.test.js b/src/elements/content-preview/preview-header/__tests__/PreviewHeader.test.js
index 1a679161be..ae54178e81 100644
--- a/src/elements/content-preview/preview-header/__tests__/PreviewHeader.test.js
+++ b/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([