From a01e19d21399f24e79d3e338978a3277b71f5991 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

---
 src/courseware/course/chat/Chat.jsx      | 10 ++++++++--
 src/courseware/course/chat/Chat.test.jsx |  8 +++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/courseware/course/chat/Chat.jsx b/src/courseware/course/chat/Chat.jsx
index 4dbe81398c..6a1daa9c31 100644
--- a/src/courseware/course/chat/Chat.jsx
+++ b/src/courseware/course/chat/Chat.jsx
@@ -1,13 +1,15 @@
+import { Suspense, lazy } from 'react';
 import { createPortal } from 'react-dom';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
-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 +56,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={null}>
+            <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();
         }
       },
     );