fix(files): attach wheel listener before paint and guard SVG src

Author: waleedlatif1

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

@@ -1081,12 +1081,14 @@ function SvgPreview({ content }: { content: string }) {
 
   return (
     <ZoomablePreview className='h-full' contentClassName='h-full w-full'>
-      <img
-        src={blobUrl}
-        alt='SVG preview'
-        className='max-h-full max-w-full select-none object-contain'
-        draggable={false}
-      />
+      {blobUrl && (
+        <img
+          src={blobUrl}
+          alt='SVG preview'
+          className='max-h-full max-w-full select-none object-contain'
+          draggable={false}
+        />
+      )}
     </ZoomablePreview>
   )
 }

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

@@ -1,7 +1,7 @@
 'use client'
 
 import type { MouseEvent, ReactNode } from 'react'
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { useCallback, useLayoutEffect, useRef, useState } from 'react'
 import { cn } from '@/lib/core/utils/cn'
 import { PreviewToolbar } from './preview-toolbar'
 import { bindPreviewWheelZoom } from './preview-wheel-zoom'
@@ -134,7 +134,7 @@ export function ZoomablePreview({
     applyZoom(clampZoom(zoom / ZOOM_BUTTON_FACTOR))
   }
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const viewport = viewportRef.current
     if (!viewport) return