From 842e2acbef946f23ae50742c340f147765506497 Mon Sep 17 00:00:00 2001
From: Marcos <rigoli82@gmail.com>
Date: Fri, 18 Oct 2024 09:47:25 -0300
Subject: [PATCH] feat: Updated Xpert component to be lazy loaded

---
 package.json                             |  1 +
 src/courseware/course/chat/Chat.jsx      | 11 +++++++++--
 src/courseware/course/chat/Chat.test.jsx |  8 +++++---
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 7898c9ef5e..a559045179 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "start": "fedx-scripts webpack-dev-server --progress",
     "dev": "PUBLIC_PATH=/learning/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
     "test": "fedx-scripts jest --coverage --passWithNoTests",
+    "test2": "fedx-scripts jest --passWithNoTests",
     "types": "tsc --noEmit"
   },
   "author": "edX",
diff --git a/src/courseware/course/chat/Chat.jsx b/src/courseware/course/chat/Chat.jsx
index 4dbe81398c..92c30d3d94 100644
--- a/src/courseware/course/chat/Chat.jsx
+++ b/src/courseware/course/chat/Chat.jsx
@@ -1,13 +1,16 @@
+import { React, Suspense, lazy } from 'react';
 import { createPortal } from 'react-dom';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
+import { Spinner } from '@openedx/paragon';
 
-import { Xpert } from '@edx/frontend-lib-learning-assistant';
 import { injectIntl } from '@edx/frontend-platform/i18n';
 
 import { VERIFIED_MODES } from '@src/constants';
 import { useModel } from '../../../generic/model-store';
 
+const Xpert = lazy(async () => ({ default: (await import('@edx/frontend-lib-learning-assistant')).Xpert }));
+
 const Chat = ({
   enabled,
   enrollmentMode,
@@ -54,7 +57,11 @@ const Chat = ({
     <>
       {/* Use a portal to ensure that component overlay does not compete with learning MFE styles. */}
       {shouldDisplayChat && (createPortal(
-        <Xpert courseId={courseId} contentToolsEnabled={contentToolsEnabled} unitId={unitId} />,
+        <div data-testid="xpert-portal">
+          <Suspense fallback={<Spinner animation="border" variant="light" />}>
+            <Xpert courseId={courseId} contentToolsEnabled={contentToolsEnabled} unitId={unitId} />
+          </Suspense>
+        </div>,
         document.body,
       ))}
     </>
diff --git a/src/courseware/course/chat/Chat.test.jsx b/src/courseware/course/chat/Chat.test.jsx
index 067565f34b..f9564ecd9d 100644
--- a/src/courseware/course/chat/Chat.test.jsx
+++ b/src/courseware/course/chat/Chat.test.jsx
@@ -78,11 +78,13 @@ describe('Chat', () => {
           { store },
         );
 
-        const chat = screen.queryByTestId(mockXpertTestId);
+        const portal = screen.queryByTestId('xpert-portal');
+
         if (test.isVisible) {
-          expect(chat).toBeInTheDocument();
+          expect(portal).toBeInTheDocument();
+          expect(await screen.findByTestId(mockXpertTestId)).toBeInTheDocument();
         } else {
-          expect(chat).not.toBeInTheDocument();
+          expect(portal).not.toBeInTheDocument();
         }
       },
     );