@100mslive/roomkit-react 0.3.11-alpha.7 → 0.3.11-alpha.9

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.11-alpha.7",
+  "version": "0.3.11-alpha.9",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -74,12 +74,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.11-alpha.7",
+    "@100mslive/hls-player": "0.3.11-alpha.9",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.11-alpha.7",
-    "@100mslive/hms-whiteboard": "0.0.1-alpha.7",
-    "@100mslive/react-icons": "0.10.11-alpha.7",
-    "@100mslive/react-sdk": "0.10.11-alpha.7",
+    "@100mslive/hms-virtual-background": "1.13.11-alpha.9",
+    "@100mslive/hms-whiteboard": "0.0.1-alpha.9",
+    "@100mslive/react-icons": "0.10.11-alpha.9",
+    "@100mslive/react-sdk": "0.10.11-alpha.9",
     "@100mslive/types-prebuilt": "0.12.8",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -115,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "361d36f30fc8719e81d889901337ef3936cd88bc"
+  "gitHead": "75f465ed5c9e1c1f89f3eb1e9f30c3e104c55db4"
 }

package/src/Prebuilt/components/VideoLayouts/GridLayout.tsx

@@ -17,12 +17,14 @@ import { ToastManager } from '../Toast/ToastManager';
 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 WhiteboardLayout = React.lazy(() =>
+  import('./WhiteboardLayout').then(module => ({ default: module.WhiteboardLayout })),
+);
 
 export type TileCustomisationProps = {
   hide_participant_name_on_tile: boolean;
@@ -136,12 +138,14 @@ export const GridLayout = ({
   } else if (whiteboard?.open) {
     return (
       <VideoTileContext.Provider value={tileLayout}>
-        <WhiteboardLayout
-          peers={sortedPeers}
-          onPageSize={setPageSize}
-          onPageChange={setMainPage}
-          edgeToEdge={edge_to_edge}
-        />
+        <React.Suspense>
+          <WhiteboardLayout
+            peers={sortedPeers}
+            onPageSize={setPageSize}
+            onPageChange={setMainPage}
+            edgeToEdge={edge_to_edge}
+          />
+        </React.Suspense>
       </VideoTileContext.Provider>
     );
   } else if (isRoleProminence) {