Single wrapper for multiplayer components (#4511)

concrete-utopia · Nov 20, 2023 · 60c26fd · 60c26fd
1 parent 0acd0bf
commit 60c26fd
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 18 deletions.
diff --git a/editor/src/components/canvas/controls/comment-indicator.tsx b/editor/src/components/canvas/controls/comment-indicator.tsx
@@ -4,19 +4,18 @@ import { jsx } from '@emotion/react'
 import React from 'react'
 import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
 import { EditorModes } from '../../editor/editor-modes'
-import { ClientSideSuspense } from '@liveblocks/react'
 import { useThreads } from '../../../../liveblocks.config'
 import { useDispatch } from '../../editor/store/dispatch-context'
 import { switchEditorMode } from '../../editor/actions/action-creators'
 import { canvasPoint } from '../../../core/shared/math-utils'
 import { UtopiaTheme } from '../../../uuiui'
-import { ErrorBoundary } from '../../../utils/react-error-boundary'
 import { Substores, useEditorState } from '../../editor/store/store-hook'
 import {
   multiplayerColorFromIndex,
   multiplayerInitialsFromName,
   normalizeMultiplayerName,
 } from '../../../core/shared/multiplayer'
+import { MultiplayerWrapper } from '../../../utils/multiplayer-wrapper'
 
 export const CommentIndicator = React.memo(() => {
   const projectId = useEditorState(
@@ -31,9 +30,9 @@ export const CommentIndicator = React.memo(() => {
 
   return (
     <CanvasOffsetWrapper>
-      <ErrorBoundary fallback={null}>
-        <ClientSideSuspense fallback={null}>{() => <CommentIndicatorInner />}</ClientSideSuspense>
-      </ErrorBoundary>
+      <MultiplayerWrapper errorFallback={null} suspenseFallback={null}>
+        <CommentIndicatorInner />
+      </MultiplayerWrapper>
     </CanvasOffsetWrapper>
   )
 })

diff --git a/editor/src/components/canvas/controls/comment-popup.tsx b/editor/src/components/canvas/controls/comment-popup.tsx
@@ -3,18 +3,17 @@ import React from 'react'
 import { Substores, useEditorState } from '../../editor/store/store-hook'
 import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
 import { isCommentMode } from '../../editor/editor-modes'
-import { ClientSideSuspense } from '@liveblocks/react'
 import { useCreateThread } from '../../../../liveblocks.config'
 import type { ComposerSubmitComment } from '@liveblocks/react-comments'
 import { Comment, Composer } from '@liveblocks/react-comments'
 import { stopPropagation } from '../../inspector/common/inspector-utils'
 import { UtopiaTheme } from '../../../uuiui'
-import { ErrorBoundary } from '../../../utils/react-error-boundary'
 import {
   useCanvasCommentThread,
   useMyMultiplayerColorIndex,
 } from '../../../core/commenting/comment-hooks'
 import { isLoggedIn } from '../../editor/action-types'
+import { MultiplayerWrapper } from '../../../utils/multiplayer-wrapper'
 
 export const CommentPopup = React.memo(() => {
   const mode = useEditorState(
@@ -43,11 +42,12 @@ export const CommentPopup = React.memo(() => {
         onKeyUp={stopPropagation}
         onMouseUp={stopPropagation}
       >
-        <ErrorBoundary fallback={<div>Can not load comments</div>}>
-          <ClientSideSuspense fallback={<div>Loading…</div>}>
-            {() => <CommentThread x={location.x} y={location.y} />}
-          </ClientSideSuspense>
-        </ErrorBoundary>
+        <MultiplayerWrapper
+          errorFallback={<div>Can not load comments</div>}
+          suspenseFallback={<div>Loading…</div>}
+        >
+          <CommentThread x={location.x} y={location.y} />
+        </MultiplayerWrapper>
       </div>
     </CanvasOffsetWrapper>
   )

diff --git a/editor/src/components/canvas/design-panel-root.tsx b/editor/src/components/canvas/design-panel-root.tsx
@@ -32,7 +32,7 @@ import { FlexRow } from 'utopia-api'
 import type { StoredPanel } from './stored-layout'
 import { MultiplayerPresence } from './multiplayer-cursors'
 import { useStatus } from '../../../liveblocks.config'
-import { ClientSideSuspense } from '@liveblocks/react'
+import { MultiplayerWrapper } from '../../utils/multiplayer-wrapper'
 
 interface NumberSize {
   width: number
@@ -146,9 +146,9 @@ const DesignPanelRootInner = React.memo(() => {
             <CanvasWrapperComponent />
             {when(
               roomStatus === 'connected',
-              <ClientSideSuspense fallback={<div />}>
-                {() => <MultiplayerPresence />}
-              </ClientSideSuspense>,
+              <MultiplayerWrapper errorFallback={null} suspenseFallback={null}>
+                <MultiplayerPresence />
+              </MultiplayerWrapper>,
             )}
             <GridPanelsContainer />
           </SimpleFlexColumn>

diff --git a/editor/src/components/user-bar.tsx b/editor/src/components/user-bar.tsx
@@ -1,4 +1,3 @@
-import { ClientSideSuspense } from '@liveblocks/react'
 import React from 'react'
 import { useOthers, useSelf, useStatus } from '../../liveblocks.config'
 import { getUserPicture, isLoggedIn } from '../common/user'
@@ -13,6 +12,7 @@ import {
 import { Avatar, Tooltip, useColorTheme } from '../uuiui'
 import { Substores, useEditorState } from './editor/store/store-hook'
 import { unless, when } from '../utils/react-conditionals'
+import { MultiplayerWrapper } from '../utils/multiplayer-wrapper'
 import { useDispatch } from './editor/store/dispatch-context'
 import { switchEditorMode } from './editor/actions/action-creators'
 import type { EditorAction } from './editor/action-types'
@@ -35,7 +35,9 @@ export const UserBar = React.memo(() => {
     return <SinglePlayerUserBar />
   } else {
     return (
-      <ClientSideSuspense fallback={<div />}>{() => <MultiplayerUserBar />}</ClientSideSuspense>
+      <MultiplayerWrapper errorFallback={null} suspenseFallback={null}>
+        <MultiplayerUserBar />
+      </MultiplayerWrapper>
     )
   }
 })

diff --git a/editor/src/utils/multiplayer-wrapper.tsx b/editor/src/utils/multiplayer-wrapper.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { ErrorBoundary } from './react-error-boundary'
+import { ClientSideSuspense } from '@liveblocks/react'
+
+type Fallback = NonNullable<React.ReactNode> | null
+
+export const MultiplayerWrapper = React.memo(
+  (props: { errorFallback: Fallback; suspenseFallback: Fallback; children: any }) => {
+    return (
+      <ErrorBoundary fallback={props.errorFallback}>
+        <ClientSideSuspense fallback={props.suspenseFallback}>
+          {() => props.children}
+        </ClientSideSuspense>
+      </ErrorBoundary>
+    )
+  },
+)