fix(templates-page): loading issue due to loading extensive workflow block in preview for all listings

[icecrasher321]

Summary

Workflow preview in templates page renders full workflow block causing it to be slow when there are a lot of templates. This PR makes lightweight preview components.

Type of Change

• Bug fix

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Dec 3, 2025 3:42am

[greptile-apps]

Greptile Overview

Greptile Summary

This PR optimizes template page performance by implementing lightweight preview components for workflow blocks.

• Created WorkflowPreviewBlock and WorkflowPreviewSubflow components that render minimal UI without heavy hooks, store subscriptions, or interactive features
• Added lightweight prop to WorkflowPreview component that switches between full interactive components and lightweight preview components
• Updated both template card components to pass lightweight={true} to WorkflowPreview
• The lightweight components render static previews with block headers, dummy subblock skeletons, and handles while avoiding expensive operations like store subscriptions and data fetching

Confidence Score: 5/5

• This PR is safe to merge with no risk
• The changes are well-architected, focused on performance optimization, and maintain backward compatibility. The new lightweight components follow established patterns from the codebase, use proper memoization, and have clear separation between preview and full modes. No breaking changes or risky logic introduced.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview-block.tsx	5/5	New lightweight block component that renders minimal preview without hooks or store subscriptions
apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview-subflow.tsx	5/5	New lightweight subflow component for loop/parallel previews without interactive features
apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview.tsx	5/5	Added lightweight mode with separate node types that use minimal preview components for better performance

Sequence Diagram

sequenceDiagram
participant TC as TemplateCard
participant WP as WorkflowPreview
participant LWT as lightweightNodeTypes
participant WPB as WorkflowPreviewBlock
participant WPS as WorkflowPreviewSubflow
participant BR as Block Registry
participant RF as ReactFlow
Note over TC,WP: Template Page Rendering
TC->>WP: render with lightweight={true}
Note over WP: Select node types based on mode
WP->>WP: nodeTypes = lightweight ? lightweightNodeTypes : fullNodeTypes
Note over WP: Build nodes array
loop For each block in workflow
WP->>WP: Check if lightweight mode
alt Lightweight Mode
alt Block is loop/parallel
WP->>WPS: Create minimal subflow node data
WPS-->>WP: {name, width, height, kind}
else Regular block
WP->>WPB: Create minimal block node data
WPB-->>WP: {type, name, isTrigger, horizontalHandles, enabled}
end
else Full Mode
WP->>WP: Create detailed node with subBlockValues
end
end
Note over WP,RF: Render with ReactFlow
WP->>RF: Pass nodes, edges, nodeTypes
alt Lightweight Mode
RF->>WPB: Render WorkflowPreviewBlock
WPB->>BR: getBlock(type) - config only
BR-->>WPB: blockConfig
WPB->>WPB: Filter visible subblocks from config
WPB->>RF: Render static skeleton UI
else Full Mode
RF->>RF: Render full WorkflowBlock with hooks
end
RF-->>TC: Rendered preview

Loading

[greptile-apps]

_{5 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}