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}