fix(classification): use AsyncLoad for AppliedByAiClassificationReason (#4274)

* fix(classification): use AsyncLoad for AppliedByAiClassificationReason

* fix(classification): test nits

---------

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: bxie-box

src/features/classification/Classification.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { FormattedDate, FormattedMessage } from 'react-intl';
 
-import AppliedByAiClassificationReason from './applied-by-ai-classification-reason/AppliedByAiClassificationReason';
+import AsyncLoad from '../../elements/common/async-load';
 import ClassifiedBadge from './ClassifiedBadge';
 import Label from '../../components/label/Label';
 import LoadingIndicator from '../../components/loading-indicator/LoadingIndicator';
@@ -17,6 +17,14 @@ import type { AiClassificationReason, Controls, ControlsFormat } from './flowTyp
 
 const STYLE_INLINE: 'inline' = 'inline';
 const STYLE_TOOLTIP: 'tooltip' = 'tooltip';
+
+const LoadableAppliedByAiClassificationReason = AsyncLoad({
+    loader: () =>
+        import(
+            /* webpackMode: "lazy", webpackChunkName: "applied-by-ai-classification-reason" */ './applied-by-ai-classification-reason/AppliedByAiClassificationReason'
+        ),
+});
+
 type Props = {
     aiClassificationReason?: AiClassificationReason,
     className?: string,
@@ -101,7 +109,7 @@ const Classification = ({
 
         if (aiClassificationReason) {
             return (
-                <AppliedByAiClassificationReason
+                <LoadableAppliedByAiClassificationReason
                     answer={aiClassificationReason.answer}
                     citations={aiClassificationReason.citations}
                     className="bdl-Classification-appliedByAiDetails"

src/features/classification/__tests__/Classification.test.tsx

@@ -137,7 +137,7 @@ describe('features/classification/Classification', () => {
             });
 
             const modifiedByClassificationLabel = screen.getByText(messages.modifiedByLabel.defaultMessage);
-            const modifiedByDetailsSection = screen.getByTestId('classification-modifiedby');
+            const modifiedByDetailsSection = screen.queryByTestId('classification-modifiedby');
             const messageText = screen.getByText(expectedMessageText);
             const appliedByTitle = screen.queryByText(messages.appliedByTitle.defaultMessage);
 
@@ -235,7 +235,7 @@ describe('features/classification/Classification', () => {
 
     test.each([true, false, undefined])(
         'should render AI reasoning with expected label when provided aiClassificationReason prop regardless of shouldUseAppliedByLabels value: %s',
-        shouldUseAppliedByLabels => {
+        async shouldUseAppliedByLabels => {
             const expectedCitationsCount = 5;
             const expectedCitations = Array.from({ length: expectedCitationsCount }, () => ({
                 content: 'file content for citation',
@@ -257,7 +257,8 @@ describe('features/classification/Classification', () => {
                 shouldUseAppliedByLabels,
             });
 
-            const boxAiIcon = screen.getByTestId('box-ai-icon');
+            // Wait for the async component to load
+            const boxAiIcon = await screen.findByTestId('box-ai-icon');
             const appliedByTitle = screen.getByText(messages.appliedByTitle.defaultMessage);
             const appliedByDetails = screen.getByText('Box AI on January 15, 2024'); // expected text based on provided mocks
             const reasonText = screen.getByText(aiClassificationReason.answer);
@@ -284,7 +285,7 @@ describe('features/classification/Classification', () => {
             modifiedBy,
         });
 
-        const modifiedByDetailsSection = screen.getByTestId('classification-modifiedby');
+        const modifiedByDetailsSection = screen.queryByTestId('classification-modifiedby');
         const appliedByTitle = screen.getByText(messages.appliedByTitle.defaultMessage);
         const appliedByDetails = screen.getByText('TestUser on January 15, 2024');
         const modifiedByClassificationLabel = screen.queryByText(messages.modifiedByLabel.defaultMessage);
@@ -307,7 +308,7 @@ describe('features/classification/Classification', () => {
             modifiedBy,
         });
 
-        const modifiedByDetailsSection = screen.getByTestId('classification-modifiedby');
+        const modifiedByDetailsSection = screen.queryByTestId('classification-modifiedby');
         const appliedByTitle = screen.getByText(messages.appliedByTitle.defaultMessage);
         const appliedByDetails = screen.getByText('TestUser on January 15, 2024');
         const modifiedByClassificationLabel = screen.queryByText(messages.modifiedByLabel.defaultMessage);