revert: lazy load

100mslive · Oct 22, 2024 · 04869b9 · 04869b9
1 parent e014063
commit 04869b9
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 142 deletions.
diff --git a/packages/roomkit-react/src/Prebuilt/App.tsx b/packages/roomkit-react/src/Prebuilt/App.tsx
@@ -13,12 +13,14 @@ import {
 import { AppData } from './components/AppData/AppData';
 // @ts-ignore: No implicit Any
 import AuthToken from './components/AuthToken';
+import { ConferenceScreen } from './components/ConferenceScreen';
 // @ts-ignore: No implicit Any
 import { ErrorBoundary } from './components/ErrorBoundary';
 // @ts-ignore: No implicit Any
 import { Init } from './components/init/Init';
 // @ts-ignore: No implicit Any
 import { KeyboardHandler } from './components/Input/KeyboardInputManager';
+import { LeaveScreen } from './components/LeaveScreen';
 import { MwebLandscapePrompt } from './components/MwebLandscapePrompt';
 import { Notifications } from './components/Notifications';
 import { PIPProvider } from './components/PIP/PIPProvider';
@@ -48,12 +50,6 @@ import {
 import { FeatureFlags } from './services/FeatureFlags';
 // @ts-ignore: No implicit Any
 import { DEFAULT_PORTAL_CONTAINER } from './common/constants';
-const LeaveScreen = React.lazy(() =>
-  import('./components/LeaveScreen').then(module => ({ default: module.LeaveScreen })),
-);
-const ConferenceScreen = React.lazy(() =>
-  import('./components/ConferenceScreen').then(module => ({ default: module.ConferenceScreen })),
-);
 
 export type HMSPrebuiltOptions = {
   userName?: string;

diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx
@@ -1,4 +1,4 @@
-import React, { MutableRefObject, Suspense, useCallback, useRef } from 'react';
+import React, { MutableRefObject, useCallback, useRef } from 'react';
 import { useMedia } from 'react-use';
 import { VariableSizeList } from 'react-window';
 import { selectSessionStore, selectUnreadHMSMessagesCount } from '@100mslive/hms-video-store';
@@ -8,6 +8,10 @@ import { ChevronDownIcon } from '@100mslive/react-icons';
 import { Button } from '../../../Button';
 import { Box, Flex } from '../../../Layout';
 import { config as cssConfig } from '../../../Theme';
+// @ts-ignore: No implicit Any
+import { EmojiReaction } from '../EmojiReaction';
+import { MoreSettings } from '../MoreSettings/MoreSettings';
+import { RaiseHand } from '../RaiseHand';
 import { ChatBody } from './ChatBody';
 import { ChatFooter } from './ChatFooter';
 import { ChatBlocked, ChatPaused } from './ChatStates';
@@ -17,12 +21,6 @@ import { useSidepaneResetOnLayoutUpdate } from '../AppData/useSidepaneResetOnLay
 import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
 import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
 import { SESSION_STORE_KEY, SIDE_PANE_OPTIONS } from '../../common/constants';
-const MoreSettings = React.lazy(() =>
-  import('../MoreSettings/MoreSettings').then(module => ({ default: module.MoreSettings })),
-);
-const RaiseHand = React.lazy(() => import('../RaiseHand').then(module => ({ default: module.RaiseHand })));
-// @ts-ignore: No implicit any
-const EmojiReaction = React.lazy(() => import('../EmojiReaction').then(module => ({ default: module.EmojiReaction })));
 
 export const Chat = () => {
   const { elements, screenType } = useRoomLayoutConferencingScreen();
@@ -67,10 +65,10 @@ export const Chat = () => {
         <ChatPaused />
         <ChatBlocked />
         {streaming && (!isChatEnabled || isLocalPeerBlacklisted) && (
-          <Suspense fallback={<></>}>
+          <>
             <RaiseHand css={{ bg: '$surface_default' }} />
             <MoreSettings elements={elements} screenType={screenType} />
-          </Suspense>
+          </>
         )}
       </Flex>
       {isMobile && elements?.chat?.is_overlay && !streaming ? <PinnedMessage /> : null}
@@ -131,9 +129,7 @@ export const Chat = () => {
               .otherwise(() => ({})),
           }}
         >
-          <Suspense fallback={<></>}>
-            <EmojiReaction />
-          </Suspense>
+          <EmojiReaction />
         </Box>
       )}
     </Flex>

diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { GridVideoTileLayout } from '@100mslive/types-prebuilt/elements/video_tile_layout';
 import {
   selectLocalPeerID,
@@ -9,22 +9,15 @@ import {
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
-import FullPageProgress from '../FullPageProgress';
 import { EqualProminence } from './EqualProminence';
+import { RoleProminence } from './RoleProminence';
+import { ScreenshareLayout } from './ScreenshareLayout';
+import { WhiteboardLayout } from './WhiteboardLayout';
 // @ts-ignore: No implicit Any
 import { usePinnedTrack, useSetAppDataByKey } from '../AppData/useUISettings';
 import { VideoTileContext } from '../hooks/useVideoTileLayout';
 import PeersSorter from '../../common/PeersSorter';
 import { APP_DATA } from '../../common/constants';
-const RoleProminence = React.lazy(() =>
-  import('./RoleProminence').then(module => ({ default: module.RoleProminence })),
-);
-const ScreenshareLayout = React.lazy(() =>
-  import('./ScreenshareLayout').then(module => ({ default: module.ScreenshareLayout })),
-);
-const WhiteboardLayout = React.lazy(() =>
-  import('./WhiteboardLayout').then(module => ({ default: module.WhiteboardLayout })),
-);
 
 export type TileCustomisationProps = {
   hide_participant_name_on_tile: boolean;
@@ -114,44 +107,38 @@ export const GridLayout = ({
 
   if (peerSharing) {
     return (
-      <Suspense fallback={<FullPageProgress />}>
-        <VideoTileContext.Provider value={tileLayout}>
-          <ScreenshareLayout
-            peers={sortedPeers}
-            onPageSize={setPageSize}
-            onPageChange={setMainPage}
-            edgeToEdge={edge_to_edge}
-          />
-        </VideoTileContext.Provider>
-      </Suspense>
+      <VideoTileContext.Provider value={tileLayout}>
+        <ScreenshareLayout
+          peers={sortedPeers}
+          onPageSize={setPageSize}
+          onPageChange={setMainPage}
+          edgeToEdge={edge_to_edge}
+        />
+      </VideoTileContext.Provider>
     );
   } else if (whiteboard?.open) {
     return (
-      <Suspense fallback={<FullPageProgress />}>
-        <VideoTileContext.Provider value={tileLayout}>
-          <WhiteboardLayout
-            peers={sortedPeers}
-            onPageSize={setPageSize}
-            onPageChange={setMainPage}
-            edgeToEdge={edge_to_edge}
-          />
-        </VideoTileContext.Provider>
-      </Suspense>
+      <VideoTileContext.Provider value={tileLayout}>
+        <WhiteboardLayout
+          peers={sortedPeers}
+          onPageSize={setPageSize}
+          onPageChange={setMainPage}
+          edgeToEdge={edge_to_edge}
+        />
+      </VideoTileContext.Provider>
     );
   } else if (isRoleProminence) {
     return (
-      <Suspense fallback={<FullPageProgress />}>
-        <VideoTileContext.Provider value={tileLayout}>
-          <RoleProminence
-            peers={sortedPeers}
-            onPageSize={setPageSize}
-            onPageChange={setMainPage}
-            prominentRoles={prominentRoles}
-            isInsetEnabled={isInsetEnabled}
-            edgeToEdge={edge_to_edge}
-          />
-        </VideoTileContext.Provider>
-      </Suspense>
+      <VideoTileContext.Provider value={tileLayout}>
+        <RoleProminence
+          peers={sortedPeers}
+          onPageSize={setPageSize}
+          onPageChange={setMainPage}
+          prominentRoles={prominentRoles}
+          isInsetEnabled={isInsetEnabled}
+          edgeToEdge={edge_to_edge}
+        />
+      </VideoTileContext.Provider>
     );
   }
   return (

diff --git a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx
@@ -1,10 +1,14 @@
-import React, { Suspense, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useMedia } from 'react-use';
 import { match } from 'ts-pattern';
 import { selectAppData, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk';
+import { Polls } from '../components/Polls/Polls';
+import { RoomDetailsPane } from '../components/RoomDetails/RoomDetailsPane';
 import { LayoutMode } from '../components/Settings/LayoutSettings';
+import { SidePaneTabs } from '../components/SidePaneTabs';
 import { TileCustomisationProps } from '../components/VideoLayouts/GridLayout';
 import VideoTile from '../components/VideoTile';
+import { VBPicker } from '../components/VirtualBackground/VBPicker';
 import { Flex } from '../../Layout';
 import { config as cssConfig, styled } from '../../Theme';
 // @ts-ignore: No implicit Any
@@ -18,16 +22,6 @@ import {
 import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
 import { translateAcross } from '../../utils';
 import { APP_DATA, SIDE_PANE_OPTIONS, UI_SETTINGS } from '../common/constants';
-const SidePaneTabs = React.lazy(() =>
-  import('../components/SidePaneTabs').then(module => ({ default: module.SidePaneTabs })),
-);
-const Polls = React.lazy(() => import('../components/Polls/Polls').then(module => ({ default: module.Polls })));
-const RoomDetailsPane = React.lazy(() =>
-  import('../components/RoomDetails/RoomDetailsPane').then(module => ({ default: module.RoomDetailsPane })),
-);
-const VBPicker = React.lazy(() =>
-  import('../components/VirtualBackground/VBPicker').then(module => ({ default: module.VBPicker })),
-);
 
 const Wrapper = styled('div', {
   w: '$100',
@@ -239,7 +233,7 @@ const SidePane = ({
           {...tileLayout}
         />
       )}
-      <Suspense fallback={<></>}>{SidepaneComponent}</Suspense>
+      {SidepaneComponent}
     </Flex>
   );
 };

diff --git a/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx b/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { ControlPosition } from 'react-draggable';
 import { useMedia } from 'react-use';
 import {
@@ -15,24 +15,23 @@ import {
   useHMSStore,
 } from '@100mslive/react-sdk';
 import { PeopleAddIcon, ShareScreenIcon } from '@100mslive/react-icons';
-import FullPageProgress from '../components/FullPageProgress';
 import { GridLayout } from '../components/VideoLayouts/GridLayout';
 import { Box, Flex } from '../../Layout';
 import { config } from '../../Theme';
+// @ts-ignore: No implicit Any
+import { EmbedView } from './EmbedView';
+// @ts-ignore: No implicit Any
+import HLSView from './HLSView';
+// @ts-ignore: No implicit Any
+import { PDFView } from './PDFView';
 import SidePane from './SidePane';
+import { WaitingView } from './WaitingView';
 import { CaptionsViewer } from '../plugins/CaptionsViewer';
 // @ts-ignore: No implicit Any
 import { usePDFConfig, useUrlToEmbed } from '../components/AppData/useUISettings';
 import { useCloseScreenshareWhiteboard } from '../components/hooks/useCloseScreenshareWhiteboard';
 import { useLandscapeHLSStream, useMobileHLSStream, useWaitingRoomInfo } from '../common/hooks';
 import { SESSION_STORE_KEY } from '../common/constants';
-// @ts-ignore: No implicit Any
-const HLSView = React.lazy(() => import('./HLSView'));
-// @ts-ignore: No implicit Any
-const EmbedView = React.lazy(() => import('./EmbedView').then(module => ({ default: module.EmbedView })));
-// @ts-ignore: No implicit Any
-const PDFView = React.lazy(() => import('./PDFView').then(module => ({ default: module.PDFView })));
-const WaitingView = React.lazy(() => import('./WaitingView').then(module => ({ default: module.WaitingView })));
 
 export const VideoStreamingSection = ({
   screenType,
@@ -89,59 +88,57 @@ export const VideoStreamingSection = ({
         .with({ isMobileHLSStream: true }, () => 'column')
         .otherwise(() => 'row')}
     >
-      <Suspense fallback={<FullPageProgress />}>
-        {match({
-          screenType,
-          isNotAllowedToPublish,
-          isScreenOnlyPublishParams,
-          hasSubscribedRolePublishing,
-          isSharingScreen,
-          pdfAnnotatorActive,
-          urlToIframe,
-        })
-          .with(
-            {
-              screenType: 'hls_live_streaming',
-            },
-            () => <HLSView />,
-          )
-          .when(
-            ({ isNotAllowedToPublish, hasSubscribedRolePublishing }) =>
-              isNotAllowedToPublish && !hasSubscribedRolePublishing,
-            () => (
-              <WaitingView
-                title="Waiting for Host to join"
-                subtitle="Sit back and relax"
-                icon={<PeopleAddIcon width="56px" height="56px" style={{ color: 'white' }} />}
-              />
-            ),
-          )
-          .when(
-            ({ isScreenOnlyPublishParams, isSharingScreen, hasSubscribedRolePublishing }) =>
-              isScreenOnlyPublishParams && !isSharingScreen && !hasSubscribedRolePublishing,
-            () => (
-              <WaitingView
-                title="Ready to present"
-                subtitle="Select the Screenshare button to start presenting"
-                icon={<ShareScreenIcon width="56px" height="56px" style={{ color: 'white' }} />}
-              />
-            ),
-          )
-          .when(
-            ({ pdfAnnotatorActive }) => !!pdfAnnotatorActive,
-            () => <PDFView />,
-          )
-          .when(
-            ({ urlToIframe }) => !!urlToIframe,
-            () => <EmbedView />,
-          )
+      {match({
+        screenType,
+        isNotAllowedToPublish,
+        isScreenOnlyPublishParams,
+        hasSubscribedRolePublishing,
+        isSharingScreen,
+        pdfAnnotatorActive,
+        urlToIframe,
+      })
+        .with(
+          {
+            screenType: 'hls_live_streaming',
+          },
+          () => <HLSView />,
+        )
+        .when(
+          ({ isNotAllowedToPublish, hasSubscribedRolePublishing }) =>
+            isNotAllowedToPublish && !hasSubscribedRolePublishing,
+          () => (
+            <WaitingView
+              title="Waiting for Host to join"
+              subtitle="Sit back and relax"
+              icon={<PeopleAddIcon width="56px" height="56px" style={{ color: 'white' }} />}
+            />
+          ),
+        )
+        .when(
+          ({ isScreenOnlyPublishParams, isSharingScreen, hasSubscribedRolePublishing }) =>
+            isScreenOnlyPublishParams && !isSharingScreen && !hasSubscribedRolePublishing,
+          () => (
+            <WaitingView
+              title="Ready to present"
+              subtitle="Select the Screenshare button to start presenting"
+              icon={<ShareScreenIcon width="56px" height="56px" style={{ color: 'white' }} />}
+            />
+          ),
+        )
+        .when(
+          ({ pdfAnnotatorActive }) => !!pdfAnnotatorActive,
+          () => <PDFView />,
+        )
+        .when(
+          ({ urlToIframe }) => !!urlToIframe,
+          () => <EmbedView />,
+        )
 
-          .otherwise(() => {
-            // @ts-ignore
-            return <GridLayout {...(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid} />;
-          })}
-        <CaptionsViewer setDefaultPosition={setCaptionPosition} defaultPosition={captionPosition} />
-      </Suspense>
+        .otherwise(() => {
+          // @ts-ignore
+          return <GridLayout {...(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid} />;
+        })}
+      <CaptionsViewer setDefaultPosition={setCaptionPosition} defaultPosition={captionPosition} />
       <Box
         css={{
           flex: match({ isLandscapeHLSStream, isMobileHLSStream })
@@ -155,14 +152,12 @@ export const VideoStreamingSection = ({
           overflowY: 'clip',
         }}
       >
-        <Suspense fallback={<></>}>
-          <SidePane
-            screenType={screenType}
-            // @ts-ignore
-            tileProps={(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid}
-            hideControls={hideControls}
-          />
-        </Suspense>
+        <SidePane
+          screenType={screenType}
+          // @ts-ignore
+          tileProps={(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid}
+          hideControls={hideControls}
+        />
       </Box>
     </Flex>
   );