fix(logs): preserve snapshot modal while loading

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/snapshot-boundary.test.tsx

@@ -1,7 +1,7 @@
 /**
  * @vitest-environment jsdom
  */
-import { act } from 'react'
+import { act, type ReactNode } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -10,10 +10,35 @@ const { mockToastError } = vi.hoisted(() => ({
 }))
 
 vi.mock('@sim/emcn', () => ({
+  Loader: () => <span aria-hidden='true' />,
+  Modal: ({
+    children,
+    open,
+    onOpenChange,
+  }: {
+    children: ReactNode
+    open: boolean
+    onOpenChange: (open: boolean) => void
+  }) =>
+    open ? (
+      <div>
+        {children}
+        <button type='button' onClick={() => onOpenChange(false)}>
+          Close
+        </button>
+      </div>
+    ) : null,
+  ModalBody: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  ModalContent: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  ModalDescription: ({ children }: { children: ReactNode }) => <p>{children}</p>,
+  ModalHeader: ({ children }: { children: ReactNode }) => <h2>{children}</h2>,
   toast: { error: mockToastError },
 }))
 
-import { SnapshotBoundary } from '@/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/snapshot-boundary'
+import {
+  SnapshotBoundary,
+  SnapshotModalFallback,
+} from '@/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/snapshot-boundary'
 
 const LOAD_ERROR = new Error('snapshot chunk failed')
 
@@ -72,4 +97,20 @@ describe('SnapshotBoundary', () => {
     )
     expect(onLoadError).toHaveBeenCalledOnce()
   })
+
+  it('keeps the modal shell visible while the snapshot bundle loads', () => {
+    const onClose = vi.fn()
+
+    act(() => {
+      root.render(<SnapshotModalFallback isOpen onClose={onClose} />)
+    })
+
+    expect(container.textContent).toContain('Workflow State')
+    expect(container.textContent).toContain('Loading run snapshot…')
+
+    const closeButton = container.querySelector('button')
+    expect(closeButton).not.toBeNull()
+    act(() => closeButton?.click())
+    expect(onClose).toHaveBeenCalledOnce()
+  })
 })

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/snapshot-boundary.tsx

@@ -1,7 +1,15 @@
 'use client'
 
 import { Component, type ErrorInfo, type ReactNode } from 'react'
-import { toast } from '@sim/emcn'
+import {
+  Loader,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalDescription,
+  ModalHeader,
+  toast,
+} from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 
 const logger = createLogger('ExecutionSnapshotBoundary')
@@ -18,6 +26,35 @@ interface SnapshotBoundaryState {
 
 const reportedErrors = new WeakSet<Error>()
 
+interface SnapshotModalFallbackProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export function SnapshotModalFallback({ isOpen, onClose }: SnapshotModalFallbackProps) {
+  return (
+    <Modal
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) onClose()
+      }}
+    >
+      <ModalContent size='full' className='flex h-[90vh] flex-col'>
+        <ModalHeader>Workflow State</ModalHeader>
+        <ModalBody className='!p-0 flex min-h-0 flex-1 items-center justify-center overflow-hidden'>
+          <ModalDescription className='sr-only'>
+            Loading the workflow state snapshot for this execution
+          </ModalDescription>
+          <div className='flex items-center gap-2 text-[var(--text-secondary)]'>
+            <Loader className='size-[16px]' animate />
+            <span className='text-small'>Loading run snapshot…</span>
+          </div>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  )
+}
+
 /**
  * Error boundary for the lazily loaded execution snapshot.
  *

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx

@@ -63,7 +63,10 @@ import { DELETED_WORKFLOW_LABEL } from '@/lib/workflows/workflow-labels'
  * barrel forms a parent->child cycle that would keep the barrel edge to the snapshot
  * alive and silently defeat the ExecutionSnapshot lazy split below.
  */
-import { SnapshotBoundary } from '@/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/snapshot-boundary'
+import {
+  SnapshotBoundary,
+  SnapshotModalFallback,
+} from '@/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/snapshot-boundary'
 import { FileCards } from '@/app/workspace/[workspaceId]/logs/components/log-details/components/file-download'
 import { TraceView } from '@/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view'
 import { useLogDetailsResize } from '@/app/workspace/[workspaceId]/logs/hooks'
@@ -708,7 +711,14 @@ export function LogDetailsContent({ log, onActiveTabChange }: LogDetailsContentP
           isOpen={isExecutionSnapshotOpen}
           onLoadError={() => setIsExecutionSnapshotOpen(false)}
         >
-          <Suspense fallback={null}>
+          <Suspense
+            fallback={
+              <SnapshotModalFallback
+                isOpen={isExecutionSnapshotOpen}
+                onClose={() => setIsExecutionSnapshotOpen(false)}
+              />
+            }
+          >
             <ExecutionSnapshot
               executionId={log.executionId}
               traceSpans={traceSpans}

apps/sim/app/workspace/[workspaceId]/logs/logs.tsx

@@ -66,7 +66,10 @@ import {
   type ResourceTableHandle,
 } from '@/app/workspace/[workspaceId]/components'
 import { LogsEmptyState } from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state'
-import { SnapshotBoundary } from '@/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/snapshot-boundary'
+import {
+  SnapshotBoundary,
+  SnapshotModalFallback,
+} from '@/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/snapshot-boundary'
 import { useLogFilters } from '@/app/workspace/[workspaceId]/logs/hooks/use-log-filters'
 import { useSearchState } from '@/app/workspace/[workspaceId]/logs/hooks/use-search-state'
 import {
@@ -1281,7 +1284,7 @@ export default function Logs() {
           isOpen
           onLoadError={handleClosePreview}
         >
-          <Suspense fallback={null}>
+          <Suspense fallback={<SnapshotModalFallback isOpen onClose={handleClosePreview} />}>
             <ExecutionSnapshot
               executionId={previewDetailQuery.data.executionId}
               traceSpans={previewDetailQuery.data.executionData?.traceSpans}