Skip to content

chore: fix rerenders on files#3805

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
icecrasher321 merged 2 commits into from
Mar 27, 2026
Merged

chore: fix rerenders on files #3805

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ae150b4
chore: fix rerenders on files
adithyaakrishna Mar 27, 2026
3750f6e
chore: fix review changes
adithyaakrishna Mar 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 15 additions & 9 deletions apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
'use client'

import { useCallback, useEffect, useRef, useState } from 'react'
import { memo, useCallback, useEffect, useRef, useState } from 'react'
import { createLogger } from '@sim/logger'
import { Skeleton } from '@/components/emcn'
import { cn } from '@/lib/core/utils/cn'
Expand DownExpand Up@@ -183,6 +183,8 @@ function TextEditor({
} = useWorkspaceFileContent(workspaceId, file.id, file.key, file.type === 'text/x-pptxgenjs')

const updateContent = useUpdateWorkspaceFileContent()
const updateContentRef = useRef(updateContent)
updateContentRef.current = updateContent

const [content, setContent] = useState('')
const [savedContent, setSavedContent] = useState('')
Expand DownExpand Up@@ -230,14 +232,14 @@ function TextEditor({
const currentContent = contentRef.current
if (currentContent === savedContentRef.current) return

await updateContent.mutateAsync({
await updateContentRef.current.mutateAsync({
workspaceId,
fileId: file.id,
content: currentContent,
})
setSavedContent(currentContent)
savedContentRef.current = currentContent
}, [workspaceId, file.id, updateContent])
}, [workspaceId, file.id])

const { saveStatus, saveImmediately, isDirty } = useAutosave({
content,
Expand DownExpand Up@@ -402,7 +404,7 @@ function TextEditor({
)
}

function IframePreview({ file }: { file: WorkspaceFileRecord }) {
const IframePreview = memo(function IframePreview({ file }: { file: WorkspaceFileRecord }) {
const serveUrl = `/api/files/serve/${encodeURIComponent(file.key)}?context=workspace`

return (
Expand All@@ -417,9 +419,9 @@ function IframePreview({ file }: { file: WorkspaceFileRecord }) {
/>
</div>
)
}
})

function ImagePreview({ file }: { file: WorkspaceFileRecord }) {
const ImagePreview = memo(function ImagePreview({ file }: { file: WorkspaceFileRecord }) {
const serveUrl = `/api/files/serve/${encodeURIComponent(file.key)}?context=workspace`

return (
Expand All@@ -432,7 +434,7 @@ function ImagePreview({ file }: { file: WorkspaceFileRecord }) {
/>
</div>
)
}
})

const pptxSlideCache = new Map<string, string[]>()

Expand DownExpand Up@@ -701,7 +703,11 @@ function PptxPreview({
)
}

function UnsupportedPreview({ file }: { file: WorkspaceFileRecord }) {
const UnsupportedPreview = memo(function UnsupportedPreview({
file,
}: {
file: WorkspaceFileRecord
}) {
const ext = getFileExtension(file.name)

return (
Expand All@@ -714,4 +720,4 @@ function UnsupportedPreview({ file }: { file: WorkspaceFileRecord }) {
</p>
</div>
)
}
})
21 changes: 13 additions & 8 deletions apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -42,7 +42,12 @@ interface PreviewPanelProps {
isStreaming?: boolean
}

export function PreviewPanel({ content, mimeType, filename, isStreaming }: PreviewPanelProps) {
export const PreviewPanel = memo(function PreviewPanel({
content,
mimeType,
filename,
isStreaming,
}: PreviewPanelProps) {
const previewType = resolvePreviewType(mimeType, filename)

if (previewType === 'markdown')
Expand All@@ -52,7 +57,7 @@ export function PreviewPanel({ content, mimeType, filename, isStreaming }: Previ
if (previewType === 'svg') return <SvgPreview content={content} />

return null
}
})

const REMARK_PLUGINS = [remarkGfm, remarkBreaks]

Expand DownExpand Up@@ -197,7 +202,7 @@ const MarkdownPreview = memo(function MarkdownPreview({
)
})

function HtmlPreview({ content }: { content: string }) {
const HtmlPreview = memo(function HtmlPreview({ content }: { content: string }) {
return (
<div className='h-full overflow-hidden'>
<iframe
Expand All@@ -208,9 +213,9 @@ function HtmlPreview({ content }: { content: string }) {
/>
</div>
)
}
})

function SvgPreview({ content }: { content: string }) {
const SvgPreview = memo(function SvgPreview({ content }: { content: string }) {
const wrappedContent = useMemo(
() =>
`<!DOCTYPE html><html><head><style>body{margin:0;display:flex;align-items:center;justify-content:center;min-height:100vh;background:transparent;}svg{max-width:100%;max-height:100vh;}</style></head><body>${content}</body></html>`,
Expand All@@ -227,9 +232,9 @@ function SvgPreview({ content }: { content: string }) {
/>
</div>
)
}
})

function CsvPreview({ content }: { content: string }) {
const CsvPreview = memo(function CsvPreview({ content }: { content: string }) {
const { headers, rows } = useMemo(() => parseCsv(content), [content])

if (headers.length === 0) {
Expand DownExpand Up@@ -271,7 +276,7 @@ function CsvPreview({ content }: { content: string }) {
</div>
</div>
)
}
})

function parseCsv(text: string): { headers: string[]; rows: string[][] } {
const lines = text.split('\n').filter((line) => line.trim().length > 0)
Expand Down
5 changes: 3 additions & 2 deletions ...kspace/[workspaceId]/files/components/files-list-context-menu/files-list-context-menu.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
'use client'

import { memo } from 'react'
import {
DropdownMenu,
DropdownMenuContent,
Expand All@@ -18,7 +19,7 @@ interface FilesListContextMenuProps {
disableUpload?: boolean
}

export function FilesListContextMenu({
export const FilesListContextMenu = memo(function FilesListContextMenu({
isOpen,
position,
onClose,
Expand DownExpand Up@@ -64,4 +65,4 @@ export function FilesListContextMenu({
</DropdownMenuContent>
</DropdownMenu>
)
}
})
Loading
Loading