improvement: workflow loading, sidebar scrolling

[emir-karabeg]

Summary

Brief description of what this PR does and why.

Fixes #(issue)

Type of Change

• [ ] Bug fix
• [ ] New feature
• [ ] Breaking change
• [ ] Documentation
• [ ] Other: ___________

Testing

How has this been tested? What should reviewers focus on?

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)

Screenshots/Videos

[vercel[bot]]

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

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Dec 16, 2025 3:14am

[greptile-apps[bot]]

Greptile Overview

Greptile Summary

This PR implements comprehensive performance optimizations focused on workflow loading and user interaction smoothness. The key changes include eliminating duplicate API calls for billing data across organization queries, introducing lazy loading for non-critical components (Chat and OAuth modal), and implementing a sophisticated drag optimization system using local displayNodes state to prevent store updates during drag operations. The PR also standardizes loading spinners across the application by replacing icon-based loaders with consistent CSS spinners, fixes scrolling issues in the s-modal sidebar, addresses SSR hydration issues with Radix UI components, and optimizes store subscriptions using useShallow() to reduce unnecessary re-renders. Additional improvements include socket connection optimizations, better canvas readiness management, and UI consistency fixes like proper background styling and footer link categorization. These changes collectively improve the workflow editing experience by making node dragging smoother, reducing initial load times, and eliminating performance bottlenecks during complex workflow operations.

Important Files Changed

Filename	Score	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx	4/5	Major performance refactor with lazy loading, local displayNodes state for smooth dragging, and optimized store subscriptions
apps/sim/stores/workflows/workflow/store.ts	5/5	Optimized updateBlockPosition function by removing unnecessary edge spreading and lastSaved updates during drag
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx	5/5	Performance optimization with memo wrapper, useShallow subscriptions, and useMemo for expensive calculations
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-current-workflow.ts	5/5	Added shallow comparison to store subscriptions and simplified state access for better performance
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/settings-modal.tsx	5/5	Removed duplicate billing API call from organization query to optimize loading performance
apps/sim/hooks/queries/organization.ts	5/5	Eliminated redundant billing data fetch from fetchOrganizations function
apps/sim/app/workspace/providers/socket-provider.tsx	4/5	Optimized socket connection by removing blocking token generation from initialization
apps/sim/components/emcn/components/s-modal/s-modal.tsx	5/5	Fixed sidebar scrolling by adding min-h-0 and overflow-y-auto classes
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx	5/5	Added client-side hydration protection for Radix Popover component
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx	5/5	Simplified auto-scroll logic with boolean flag instead of per-workflow ID tracking
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/team-management.tsx	5/5	Switched to use userSubscriptionData instead of billing data from organizationsData
apps/sim/app/workspace/page.tsx	5/5	Replaced Loader2 icon with CSS spinner for consistency
apps/sim/app/workspace/[workspaceId]/w/page.tsx	5/5	Updated loading state with CSS spinner and restructured layout to match workflow page
apps/sim/app/workspace/[workspaceId]/layout.tsx	5/5	Added background color using CSS variable for consistent theming
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/layout.tsx	5/5	Changed background from Tailwind class to CSS variable for dynamic theming
apps/sim/app/(landing)/components/footer/consts.ts	5/5	Moved 'Guardrails' from FOOTER_TOOLS to FOOTER_BLOCKS for correct categorization
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/training-modal/training-modal.tsx	5/5	File relocation from training-controls to dedicated training-modal directory

Confidence score: 4/5

• This PR contains well-executed performance optimizations that should significantly improve workflow loading and interaction smoothness
• Score reflects the complexity of the drag optimization system and lazy loading implementation which, while well-designed, introduces new patterns that need careful monitoring
• Pay close attention to the workflow.tsx changes as they introduce local state management for drag operations and lazy loading patterns that could affect user experience if not properly handled

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant Router
    participant SidebarStore
    participant WorkflowStore
    participant WorkflowRegistry
    participant Server

    User->>Browser: "Click sidebar collapse button"
    Browser->>SidebarStore: "setIsCollapsed(!isCollapsed)"
    SidebarStore->>SidebarStore: "Update isCollapsed state"
    
    alt When collapsing sidebar
        SidebarStore->>Browser: "Update CSS variable --sidebar-width to 0"
        Browser->>User: "Show floating collapsed header"
    else When expanding sidebar
        SidebarStore->>Browser: "Update CSS variable --sidebar-width to stored width"
        Browser->>User: "Show full sidebar"
    end

    User->>Browser: "Navigate to workspace page"
    Browser->>Router: "Route to /workspace/[workspaceId]/w"
    Router->>WorkflowRegistry: "Fetch workflows for workspace"
    WorkflowRegistry->>Server: "GET /api/workflows"
    Server-->>WorkflowRegistry: "Return workflow list"
    WorkflowRegistry->>Router: "workflows loaded"
    Router->>Browser: "Redirect to first workflow"

    User->>Browser: "Create new workflow"
    Browser->>WorkflowStore: "handleCreateWorkflow()"
    WorkflowStore->>Server: "POST /api/workflows"
    Server-->>WorkflowStore: "Return new workflow ID"
    WorkflowStore->>Browser: "Navigate to new workflow"
    Browser->>Browser: "Scroll sidebar to new workflow"

    User->>Browser: "Resize sidebar"
    Browser->>SidebarStore: "setSidebarWidth(newWidth)"
    SidebarStore->>Browser: "Update CSS variable --sidebar-width"
    Browser->>User: "Visual sidebar width change"

    User->>Browser: "Search workflows (⌘K)"
    Browser->>Browser: "Open search modal"
    User->>Browser: "Select workflow from search"
    Browser->>Router: "Navigate to selected workflow"

[emir-karabeg]

@greptile

[emir-karabeg]

@greptile