fix(files): reserve embedded-image space on direct file-view loads

An embedded image in a markdown file reshifted on every open: it loaded ~2.3s in with
no reserved box and shoved everything below it down (CLS ~0.17).

The intrinsic dimensions ARE stored server-side, but the image node view never read them
at render. useWorkspaceImageDimensionsAdapter read the active files list via
queryClient.getQueryData — non-reactively — so on a cold file-view load it returned null
at first render and, because the adapter identity was stable, never re-checked when the
list later resolved.

Read the list via a reactive useWorkspaceFiles subscription instead: the adapter
re-identifies when the list arrives, re-running the image node view's memoized dimension
read so it reserves the box from the stored dimensions before the (slower) image download
finishes. The query key is shared, so it dedupes with surrounding views. Gate it behind
`enabled` (driven by the absence of a caller-supplied contentSource) so the public share
page — which passes a share token as workspaceId — doesn't fire a 404.

Verified in a CLS harness: dims present -> 0 shift; dims absent -> 0.20.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx

@@ -131,7 +131,12 @@ interface FileViewerProps {
 
 export function FileViewer(props: FileViewerProps) {
   const { contentSource, workspaceId } = props
-  const imageDimensions = useWorkspaceImageDimensionsAdapter(workspaceId)
+  // Only fetch/track dimensions when this adapter actually backs the source. A caller that supplies its
+  // own `contentSource` (the public share page) doesn't use it — and there `workspaceId` is a share
+  // token, so fetching the workspace files list would 404.
+  const imageDimensions = useWorkspaceImageDimensionsAdapter(workspaceId, {
+    enabled: !contentSource,
+  })
   const source = useMemo(
     () => contentSource ?? createWorkspaceFileContentSource(workspaceId, imageDimensions),
     [contentSource, workspaceId, imageDimensions]

apps/sim/hooks/queries/workspace-files.ts

@@ -150,12 +150,28 @@ export function useWorkspaceFiles(
  * check plus mismatch-only reporting from the caller), so it never storms, never blocks render, and never
  * touches the collaborative document.
  */
-export function useWorkspaceImageDimensionsAdapter(workspaceId: string): ImageDimensionsSource {
+export function useWorkspaceImageDimensionsAdapter(
+  workspaceId: string,
+  options?: { enabled?: boolean }
+): ImageDimensionsSource {
   const queryClient = useQueryClient()
+  // Read dimensions from a REACTIVE `useWorkspaceFiles` subscription rather than a one-shot
+  // `queryClient.getQueryData`. On a cold file-view load the list may not be cached when the image first
+  // renders; a non-reactive read would return undefined then and never recover, because the adapter's
+  // identity wouldn't change when the list later resolved. Subscribing re-identifies this adapter when
+  // the list arrives, which re-runs the image node view's memoized dimension read so it reserves the box
+  // from stored dimensions BEFORE the (slower) image download finishes — instead of measuring on load
+  // and reflowing on open. The query key is shared, so where a surrounding view already loads the list
+  // this adds no fetch; otherwise it seeds it.
+  //
+  // `enabled` gates it off for callers that don't use this adapter as their source (the public share page
+  // passes a token-scoped `contentSource`, and its `workspaceId` is actually a share token — fetching
+  // `/api/workspaces/<token>/files` there would 404).
+  const { data: files } = useWorkspaceFiles(workspaceId, 'active', options)
   return useMemo<ImageDimensionsSource>(() => {
     const listKey = workspaceFilesKeys.list(workspaceId, 'active')
     const findRecord = (src: string | undefined): WorkspaceFileRecord | undefined =>
-      findWorkspaceFileBySrc(queryClient.getQueryData<WorkspaceFileRecord[]>(listKey), src)
+      findWorkspaceFileBySrc(files, src)
     return {
       getImageDimensions: (src) => {
         const record = findRecord(src)
@@ -194,7 +210,7 @@ export function useWorkspaceImageDimensionsAdapter(workspaceId: string): ImageDi
           .catch(() => {})
       },
     }
-  }, [queryClient, workspaceId])
+  }, [files, queryClient, workspaceId])
 }
 
 /**