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-runs the
image node view's memoized dimension read when the list resolves, 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,10 @@ interface FileViewerProps {
 
 export function FileViewer(props: FileViewerProps) {
   const { contentSource, workspaceId } = props
-  const imageDimensions = useWorkspaceImageDimensionsAdapter(workspaceId)
+  // A caller-supplied contentSource means the adapter is unused (and its `workspaceId` may be a share token).
+  const imageDimensions = useWorkspaceImageDimensionsAdapter(workspaceId, {
+    enabled: !contentSource,
+  })
   const source = useMemo(
     () => contentSource ?? createWorkspaceFileContentSource(workspaceId, imageDimensions),
     [contentSource, workspaceId, imageDimensions]

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

@@ -142,20 +142,28 @@ export function useWorkspaceFiles(
 }
 
 /**
- * Back the file content source's image-dimension capability with workspace file metadata. Reads intrinsic
- * dimensions synchronously from the already-loaded active file list (so a stored image reserves its box on
- * the first render), and persists the browser's measured dimensions when they're absent or disagree with
- * what's stored — an overwrite, so a stale value (left over after a content swap, or a non-EXIF-corrected
- * one) self-corrects rather than sticking. The write is fire-and-forget and de-duped (an exact-match cache
- * check plus mismatch-only reporting from the caller), so it never storms, never blocks render, and never
- * touches the collaborative document.
+ * Back the file content source's image-dimension capability with workspace file metadata. Subscribes to
+ * the active file list ({@link useWorkspaceFiles}) and reads each image's stored intrinsic dimensions from
+ * it, so a stored image reserves its box before it downloads. A reactive read (not a one-shot
+ * `getQueryData`), so it also works on a cold direct file-view load where the list isn't cached until after
+ * the image first renders: the subscription re-runs the node view's dimension read once the list resolves.
+ * Persists the browser's measured dimensions when they're absent or disagree with what's stored — an
+ * overwrite, so a stale value (left over after a content swap, or a non-EXIF-corrected one) self-corrects
+ * rather than sticking. The write is fire-and-forget and de-duped (an exact-match cache check plus
+ * mismatch-only reporting from the caller), so it never storms, never blocks render, and never touches the
+ * collaborative document. `options.enabled` turns the subscription off for callers that supply their own
+ * content source (the public share page, whose `workspaceId` is a share token that would 404).
  */
-export function useWorkspaceImageDimensionsAdapter(workspaceId: string): ImageDimensionsSource {
+export function useWorkspaceImageDimensionsAdapter(
+  workspaceId: string,
+  options?: { enabled?: boolean }
+): ImageDimensionsSource {
   const queryClient = useQueryClient()
+  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 +202,7 @@ export function useWorkspaceImageDimensionsAdapter(workspaceId: string): ImageDi
           .catch(() => {})
       },
     }
-  }, [queryClient, workspaceId])
+  }, [files, queryClient, workspaceId])
 }
 
 /**