feat: Updated Xpert component to be lazy loaded

openedx · Oct 18, 2024 · a01e19d · a01e19d
1 parent 2a58ad2
commit a01e19d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git 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
@@ -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();
         }
       },
     );