fix: discussion sidebar loads very slow (#1081)

src/courseware/course/Course.test.jsx

@@ -117,10 +117,10 @@ describe('Course', () => {
     render(<Course {...mockData} />);
     expect(sessionStorage.getItem(`notificationTrayStatus.${mockData.courseId}`)).toBe('"open"');
     const notificationShowButton = await screen.findByRole('button', { name: /Show notification tray/i });
-    expect(screen.queryByRole('region', { name: /notification tray/i })).toBeInTheDocument();
+    expect(screen.queryByRole('region', { name: /notification tray/i })).not.toHaveClass('d-none');
     fireEvent.click(notificationShowButton);
     expect(sessionStorage.getItem(`notificationTrayStatus.${mockData.courseId}`)).toBe('"closed"');
-    expect(screen.queryByRole('region', { name: /notification tray/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('region', { name: /notification tray/i })).toHaveClass('d-none');
   });
 
   it('handles reload persisting notification tray status', async () => {

src/courseware/course/sequence/Sequence.test.jsx

@@ -74,8 +74,8 @@ describe('Sequence', () => {
     );
 
     await waitFor(() => expect(screen.queryByText('Loading locked content messaging...')).toBeInTheDocument());
-    // `Previous`, `Active`, `Next` and `Prerequisite` buttons.
-    expect(screen.getAllByRole('button').length).toEqual(4);
+    // `Previous`, `Active`, `Next`, `Prerequisite` and `Close Tray` buttons.
+    expect(screen.getAllByRole('button').length).toEqual(5);
 
     expect(screen.getByText('Content Locked')).toBeInTheDocument();
     const unitContainer = container.querySelector('.unit-container');
@@ -126,7 +126,7 @@ describe('Sequence', () => {
     render(<Sequence {...mockData} />);
     expect(await screen.findByText('Loading learning sequence...')).toBeInTheDocument();
     // Renders navigation buttons plus one button for each unit.
-    expect(screen.getAllByRole('button')).toHaveLength(3 + unitBlocks.length);
+    expect(screen.getAllByRole('button')).toHaveLength(4 + unitBlocks.length);
 
     loadUnit();
     await waitFor(() => expect(screen.queryByText('Loading learning sequence...')).not.toBeInTheDocument());

src/courseware/course/sidebar/Sidebar.jsx

@@ -1,18 +1,15 @@
-import React, { useContext } from 'react';
-import SidebarContext from './SidebarContext';
-import { SIDEBARS } from './sidebars';
+import React from 'react';
+import { SIDEBAR_ORDER, SIDEBARS } from './sidebars';
 
-const Sidebar = () => {
-  const {
-    currentSidebar,
-  } = useContext(SidebarContext);
-  if (!currentSidebar) {
-    return null;
-  }
-  const CurrentSidebar = SIDEBARS[currentSidebar].Sidebar;
-  return (
-    <CurrentSidebar />
-  );
-};
+const Sidebar = () => (
+  <>
+    {
+      SIDEBAR_ORDER.map((sideBarId) => {
+        const SidebarToRender = SIDEBARS[sideBarId].Sidebar;
+        return <SidebarToRender />;
+      })
+    }
+  </>
+);
 
 export default Sidebar;

src/courseware/course/sidebar/common/SidebarBase.jsx

@@ -34,11 +34,12 @@ const SidebarBase = ({
 
   useEventListener('message', receiveMessage);
 
-  return currentSidebar === sidebarId && (
+  return (
     <section
       className={classNames('ml-0 ml-lg-4 border border-light-400 rounded-sm h-auto align-top', {
         'bg-white m-0 border-0 fixed-top vh-100 rounded-0': shouldDisplayFullScreen,
         'min-vh-100': !shouldDisplayFullScreen,
+        'd-none': currentSidebar !== sidebarId,
       }, className)}
       style={{ width: shouldDisplayFullScreen ? '100%' : width }}
       aria-label={ariaLabel}

src/courseware/course/sidebar/sidebars/discussions/DiscussionsSidebar.jsx

@@ -35,6 +35,7 @@ const DiscussionsSidebar = ({ intl }) => {
         className="d-flex w-100 h-100 border-0"
         title={intl.formatMessage(messages.discussionsTitle)}
         allow="clipboard-write"
+        loading="lazy"
       />
     </SidebarBase>
   );