feat: Updated Xpert component to be lazy loaded

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

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git 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,9 @@ 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} />,
+        <Suspense fallback={<Spinner animation="border" variant="light" />}>
+          <Xpert courseId={courseId} contentToolsEnabled={contentToolsEnabled} unitId={unitId} />
+        </Suspense>,
         document.body,
       ))}
     </>

diff --git a/src/courseware/course/chat/Chat.test.jsx b/src/courseware/course/chat/Chat.test.jsx
@@ -78,10 +78,11 @@ describe('Chat', () => {
           { store },
         );
 
-        const chat = screen.queryByTestId(mockXpertTestId);
         if (test.isVisible) {
+          const chat = await screen.findByTestId(mockXpertTestId);
           expect(chat).toBeInTheDocument();
         } else {
+          const chat = screen.queryByTestId(mockXpertTestId);
           expect(chat).not.toBeInTheDocument();
         }
       },