Fix loading collaborators from storage

editor/src/components/canvas/multiplayer-cursors.tsx

@@ -23,7 +23,7 @@ import { useDispatch } from '../editor/store/dispatch-context'
 import { Substores, useEditorState } from '../editor/store/store-hook'
 import CanvasActions from './canvas-actions'
 import { canvasPointToWindowPoint, windowToCanvasCoordinates } from './dom-lookup'
-import { useAddMyselfToCollaborators } from '../../core/commenting/comment-hooks'
+import { getCollaborator, useAddMyselfToCollaborators } from '../../core/commenting/comment-hooks'
 
 export const MultiplayerPresence = React.memo(() => {
   const dispatch = useDispatch()
@@ -103,7 +103,7 @@ const MultiplayerCursors = React.memo(() => {
     const presences = normalizeOthersList(me.id, list)
     return presences.map((p) => ({
       presenceInfo: p,
-      userInfo: collabs[p.id],
+      userInfo: getCollaborator(collabs, p),
     }))
   })
 

editor/src/components/user-bar.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useOthers, useSelf, useStatus, useStorage } from '../../liveblocks.config'
+import { useOthers, useStatus, useStorage } from '../../liveblocks.config'
 import { getUserPicture, isLoggedIn } from '../common/user'
 import type { MultiplayerColor } from '../core/shared/multiplayer'
 import {
@@ -18,8 +18,8 @@ import { useDispatch } from './editor/store/dispatch-context'
 import { showToast, switchEditorMode } from './editor/actions/action-creators'
 import type { EditorAction } from './editor/action-types'
 import { EditorModes, isFollowMode } from './editor/editor-modes'
+import { getCollaborator, useMyUserAndPresence } from '../core/commenting/comment-hooks'
 import { notice } from './common/notice'
-import { useMyUserAndPresence } from '../core/commenting/comment-hooks'
 
 const MAX_VISIBLE_OTHER_PLAYERS = 4
 
@@ -65,18 +65,18 @@ SinglePlayerUserBar.displayName = 'SinglePlayerUserBar'
 const MultiplayerUserBar = React.memo(() => {
   const dispatch = useDispatch()
   const colorTheme = useColorTheme()
+  const collabs = useStorage((store) => store.collaborators)
 
   const { user: myUser } = useMyUserAndPresence()
-  const myName = normalizeMultiplayerName(myUser.name)
+  const myName = React.useMemo(() => normalizeMultiplayerName(myUser.name), [myUser])
 
   const others = useOthers((list) =>
-    normalizeOthersList(myUser.id, list).map((other) => ({
-      id: other.id,
-      name: myUser.name,
-      colorIndex: myUser.colorIndex,
-      picture: myUser.avatar,
-      following: other.presence.following,
-    })),
+    normalizeOthersList(myUser.id, list).map((other) => {
+      return {
+        ...getCollaborator(collabs, other),
+        following: other.presence.following,
+      }
+    }),
   )
 
   const visibleOthers = React.useMemo(() => {
@@ -161,7 +161,7 @@ const MultiplayerUserBar = React.memo(() => {
                 name={multiplayerInitialsFromName(name)}
                 tooltip={name}
                 color={multiplayerColorFromIndex(other.colorIndex)}
-                picture={other.picture}
+                picture={other.avatar}
                 border={true}
                 coloredTooltip={true}
                 onClick={toggleFollowing(other.id)}

editor/src/core/commenting/comment-hooks.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
+import type { User } from '@liveblocks/client'
 import { LiveObject, type ThreadData } from '@liveblocks/client'
-import type { ThreadMetadata } from '../../../liveblocks.config'
-import { useMutation, useRoom, useSelf, useStorage, useThreads } from '../../../liveblocks.config'
+import type { Presence, ThreadMetadata, UserMeta } from '../../../liveblocks.config'
+import { useMutation, useSelf, useStorage, useThreads } from '../../../liveblocks.config'
 import { Substores, useEditorState } from '../../components/editor/store/store-hook'
 import { normalizeMultiplayerName, possiblyUniqueColor } from '../shared/multiplayer'
 import { isLoggedIn } from '../../common/user'
@@ -12,12 +13,36 @@ export function useCanvasCommentThread(x: number, y: number): ThreadData<ThreadM
   return thread
 }
 
-export function useMyUserAndPresence() {
+function placeholderUserMeta(user: User<Presence, UserMeta>): UserMeta {
+  return {
+    id: user.id,
+    name: null,
+    avatar: null,
+    colorIndex: null,
+  }
+}
+
+interface Collaborators {
+  [key: string]: UserMeta
+}
+
+export function getCollaborator(
+  collabs: Collaborators,
+  source: User<Presence, UserMeta>,
+): UserMeta {
+  return collabs[source.id] ?? placeholderUserMeta(source)
+}
+
+export function useMyUserAndPresence(): {
+  presence: User<Presence, UserMeta>
+  user: UserMeta
+} {
   const me = useSelf()
-  const myUser = useStorage((store) => store.collaborators[me.id])
+  const collabs = useStorage((store) => store.collaborators)
+  const myUser: UserMeta | null = getCollaborator(collabs, me)
   return {
     presence: me,
-    user: myUser,
+    user: myUser ?? placeholderUserMeta(me),
   }
 }