Fix comments performance

editor/src/components/canvas/controls/comment-indicator.tsx

@@ -42,6 +42,7 @@ import { setRightMenuTab } from '../../editor/actions/action-creators'
 import { RightMenuTab } from '../../editor/store/editor-state'
 import { when } from '../../../utils/react-conditionals'
 import { CommentRepliesCounter } from './comment-replies-counter'
+import { useMyUserId } from '../../../core/shared/multiplayer-hooks'
 
 const IndicatorSize = 24
 const MagnifyScale = 1.15
@@ -113,20 +114,10 @@ function useCommentBeingComposed(): TemporaryCommentIndicatorProps | null {
 
   const collabs = useStorage((storage) => storage.collaborators)
 
-  const userId = useEditorState(
-    Substores.userState,
-    (store) => {
-      if (store.userState.loginState.type !== 'LOGGED_IN') {
-        return null
-      }
-
-      return store.userState.loginState.user.userId
-    },
-    'CommentThread userId',
-  )
+  const myUserId = useMyUserId()
 
   const collaboratorInfo = React.useMemo(() => {
-    const collaborator = optionalMap((id) => collabs[id], userId)
+    const collaborator = optionalMap((id) => collabs[id], myUserId)
     if (collaborator == null) {
       return {
         initials: 'AN',
@@ -140,7 +131,7 @@ function useCommentBeingComposed(): TemporaryCommentIndicatorProps | null {
       color: multiplayerColorFromIndex(collaborator.colorIndex),
       avatar: collaborator.avatar,
     }
-  }, [collabs, userId])
+  }, [collabs, myUserId])
 
   if (position == null) {
     return null
@@ -274,14 +265,7 @@ const CommentIndicator = React.memo(({ thread }: CommentIndicatorProps) => {
     'CommentIndicator canvasOffset',
   )
 
-  const { location, scene: commentScene } = useCanvasLocationOfThread(thread)
-
-  const remixLocationRoute = thread.metadata.remixLocationRoute ?? null
-
-  const remixState = useRemixNavigationContext(commentScene)
-
-  const isOnAnotherRoute =
-    remixLocationRoute != null && remixLocationRoute !== remixState?.location.pathname
+  const { location } = useCanvasLocationOfThread(thread)
 
   const readByMe = useMyThreadReadStatus(thread)
 

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

@@ -45,10 +45,9 @@ import CanvasActions from './canvas-actions'
 import { activeFrameActionToString } from './commands/set-active-frames-command'
 import { canvasPointToWindowPoint, windowToCanvasCoordinates } from './dom-lookup'
 import { ActiveRemixSceneAtom, RemixNavigationAtom } from './remix/utopia-remix-root-component'
-import { useRemixPresence } from '../../core/shared/multiplayer-hooks'
+import { useMyUserId, useRemixPresence } from '../../core/shared/multiplayer-hooks'
 import { CanvasOffsetWrapper } from './controls/canvas-offset-wrapper'
 import { when } from '../../utils/react-conditionals'
-import { isFeatureEnabled } from '../../utils/feature-switches'
 import { CommentIndicators } from './controls/comment-indicator'
 import { CommentPopup } from './controls/comment-popup'
 
@@ -408,12 +407,15 @@ const FollowingOverlay = React.memo(() => {
 FollowingOverlay.displayName = 'FollowingOverlay'
 
 const MultiplayerShadows = React.memo(() => {
-  const me = useSelf()
+  const myUserId = useMyUserId()
   const updateMyPresence = useUpdateMyPresence()
 
   const collabs = useStorage((store) => store.collaborators)
   const others = useOthers((list) => {
-    const presences = normalizeOthersList(me.id, list)
+    if (myUserId == null) {
+      return []
+    }
+    const presences = normalizeOthersList(myUserId, list)
     return presences.map((p) => ({
       presenceInfo: p,
       userInfo: collabs[p.id],

editor/src/components/inspector/sections/comment-section.tsx

@@ -25,7 +25,12 @@ import {
   useMyThreadReadStatus,
   useReadThreads,
 } from '../../../core/commenting/comment-hooks'
-import { Substores, useEditorState, useSelectorWithCallback } from '../../editor/store/store-hook'
+import {
+  Substores,
+  useEditorState,
+  useRefEditorState,
+  useSelectorWithCallback,
+} from '../../editor/store/store-hook'
 import { when } from '../../../utils/react-conditionals'
 import {
   getFirstComment,
@@ -231,16 +236,10 @@ const ThreadPreview = React.memo(({ thread }: ThreadPreviewProps) => {
   const isOnAnotherRoute =
     remixLocationRoute != null && remixLocationRoute !== remixState?.location.pathname
 
-  const canvasScale = useEditorState(
-    Substores.canvasOffset,
-    (store) => store.editor.canvas.scale,
-    'ThreadPreview canvasScale',
-  )
-  const canvasOffset = useEditorState(
-    Substores.canvasOffset,
-    (store) => store.editor.canvas.roundedCanvasOffset,
-    'ThreadPreview canvasOffset',
-  )
+  const editorRef = useRefEditorState((store) => ({
+    canvasScale: store.editor.canvas.scale,
+    canvasOffset: store.editor.canvas.roundedCanvasOffset,
+  }))
 
   const onClick = React.useCallback(() => {
     if (isOnAnotherRoute) {
@@ -262,7 +261,11 @@ const ThreadPreview = React.memo(({ thread }: ThreadPreviewProps) => {
         height: canvasArea.height,
       })
 
-      const windowLocation = canvasPointToWindowPoint(location, canvasScale, canvasOffset)
+      const windowLocation = canvasPointToWindowPoint(
+        location,
+        editorRef.current.canvasScale,
+        editorRef.current.canvasOffset,
+      )
 
       // adds a padding of 250px around `location`
       const windowRect = canvasRectangle({
@@ -291,8 +294,7 @@ const ThreadPreview = React.memo(({ thread }: ThreadPreviewProps) => {
     location,
     thread.id,
     commentScene,
-    canvasScale,
-    canvasOffset,
+    editorRef,
   ])
 
   const resolveThread = useResolveThread()

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

@@ -28,6 +28,7 @@ import type { ElementPath } from '../shared/project-file-types'
 import type { ElementInstanceMetadata } from '../shared/element-template'
 import * as EP from '../shared/element-path'
 import { getCurrentTheme } from '../../components/editor/store/editor-state'
+import { useMyUserId } from '../shared/multiplayer-hooks'
 
 export function useCanvasCommentThreadAndLocation(comment: CommentId): {
   location: CanvasPoint | null
@@ -268,17 +269,20 @@ export function useUnresolvedThreads() {
 
 export function useReadThreads() {
   const threads = useThreads()
-  const self = useSelf()
+  const myUserId = useMyUserId()
   const threadReadStatuses = useStorage((store) => store.userReadStatusesByThread)
 
   const filteredThreads = threads.threads.filter((thread) => {
+    if (myUserId == null) {
+      return false
+    }
     if (thread == null) {
       return false
     }
     if (threadReadStatuses[thread.id] == null) {
       return false
     }
-    return threadReadStatuses[thread.id][self.id] === true
+    return threadReadStatuses[thread.id][myUserId] === true
   })
 
   return {
@@ -301,16 +305,19 @@ export function useSetThreadReadStatusOnMount(thread: ThreadData<ThreadMetadata>
 }
 
 export function useMyThreadReadStatus(thread: ThreadData<ThreadMetadata> | null): ThreadReadStatus {
-  const self = useSelf()
+  const myUserId = useMyUserId()
   return useStorage((store) => {
+    if (myUserId == null) {
+      return 'unread'
+    }
     if (thread == null) {
       return 'unread'
     }
     const statusesForThread = store.userReadStatusesByThread[thread.id]
     if (statusesForThread == null) {
       return 'unread'
     }
-    return statusesForThread[self.id] === true ? 'read' : 'unread'
+    return statusesForThread[myUserId] === true ? 'read' : 'unread'
   })
 }
 

editor/src/core/shared/multiplayer-hooks.tsx

@@ -6,6 +6,8 @@ import {
 } from '../../components/canvas/remix/utopia-remix-root-component'
 import type { RemixPresence } from './multiplayer'
 import * as EP from './element-path'
+import { Substores, useEditorState } from '../../components/editor/store/store-hook'
+import { isLoggedIn } from '../../common/user'
 
 export function useRemixPresence(): RemixPresence | null {
   const [activeRemixScene] = useAtom(ActiveRemixSceneAtom)
@@ -25,3 +27,13 @@ export function useRemixPresence(): RemixPresence | null {
 
   return remixPresence
 }
+
+export function useMyUserId(): string | null {
+  const myUserId = useEditorState(
+    Substores.userState,
+    (store) =>
+      isLoggedIn(store.userState.loginState) ? store.userState.loginState.user.userId : null,
+    'useMyUserId myUserId',
+  )
+  return myUserId
+}