perf: optimize element selection responsiveness for instant red outline

Prioritize visual feedback by rendering the selection outline immediately,
before triggering heavy operations like chat context updates and UI animations.

Key optimizations:
- Split click handling to render outline first, then update state
- Defer chat context calculations with requestAnimationFrame
- Reduce animation durations across UI components (400ms → 150ms)
- Optimize overlay refresh debounce timing (100ms → 50ms)
- Batch MobX updates with runInAction to prevent re-renders

This significantly improves responsiveness, especially for large projects
with many branches where context calculations were blocking the UI.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: drfarrell

apps/web/client/src/app/project/[id]/_components/canvas/overlay/elements/buttons/chat.tsx

@@ -40,7 +40,7 @@ export const OverlayChatInput = observer(({
     return (
         <div
             className={cn(
-                'rounded-xl backdrop-blur-lg transition-all duration-300',
+                'rounded-xl backdrop-blur-lg transition-all duration-150',
                 'shadow-xl shadow-background-secondary/50',
                 inputState.isInputting
                     ? 'bg-background/80 border shadow-xl shadow-background-secondary/50 p-1'

apps/web/client/src/app/project/[id]/_components/canvas/overlay/elements/buttons/index.tsx

@@ -43,14 +43,14 @@ export const OverlayButtons = observer(() => {
     }, [chatPosition.x, chatPosition.y]);
 
     const animationClass =
-        'origin-center opacity-0 -translate-y-2 transition-all duration-200';
+        'origin-center opacity-0 -translate-y-1 transition-all duration-100';
 
     useEffect(() => {
         if (domId) {
             requestAnimationFrame(() => {
                 const element = document.querySelector(`[data-element-id="${domId}"]`);
                 if (element) {
-                    element.classList.remove('scale-[0.2]', 'opacity-0', '-translate-y-2');
+                    element.classList.remove('scale-[0.2]', 'opacity-0', '-translate-y-1');
                     element.classList.add('scale-100', 'opacity-100', 'translate-y-0');
                 }
             });
@@ -72,7 +72,7 @@ export const OverlayButtons = observer(() => {
         transform: 'translate(-50%, 0)',
         transformOrigin: 'center center',
         pointerEvents: 'auto',
-        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        transition: 'all 0.15s ease-out',
     };
 
     return (

apps/web/client/src/app/project/[id]/_components/canvas/overlay/index.tsx

@@ -41,7 +41,7 @@ export const Overlay = observer(() => {
             id={EditorAttributes.OVERLAY_CONTAINER_ID}
             className={cn(
                 'absolute top-0 left-0 h-0 w-0 pointer-events-none',
-                editorEngine.state.shouldHideOverlay ? 'opacity-0' : 'opacity-100 transition-opacity duration-150',
+                editorEngine.state.shouldHideOverlay ? 'opacity-0' : 'opacity-100 transition-opacity duration-75',
                 editorEngine.state.editorMode === EditorMode.PREVIEW && 'hidden',
             )}
         >

apps/web/client/src/app/project/[id]/_components/editor-bar/index.tsx

@@ -93,19 +93,16 @@ export const EditorBar = observer(({ availableWidth }: { availableWidth?: number
     return (
         <DropdownManagerProvider>
             <motion.div
-                initial={{ opacity: 0, y: 20 }}
+                initial={{ opacity: 0, y: 8 }}
                 animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: 20 }}
+                exit={{ opacity: 0, y: 8 }}
                 className={cn(
                     'flex flex-col border-[0.5px] border-border p-1 px-1 bg-background rounded-xl backdrop-blur drop-shadow-xl z-50 overflow-hidden',
                     editorEngine.state.editorMode === EditorMode.PREVIEW && !windowSelected && 'hidden',
                 )}
                 transition={{
-                    type: 'spring',
-                    bounce: 0.1,
-                    duration: 0.4,
-                    stiffness: 200,
-                    damping: 25,
+                    duration: 0.15,
+                    ease: 'easeOut',
                 }}
             >
                 {getTopBar()}

apps/web/client/src/components/store/editor/chat/context.ts

@@ -25,7 +25,12 @@ export class ChatContext {
     init() {
         this.selectedReactionDisposer = reaction(
             () => this.editorEngine.elements.selected,
-            () => this.getChatContext().then((context) => (this.context = context)),
+            () => {
+                // Defer context update to prevent blocking UI
+                requestAnimationFrame(() => {
+                    this.getChatContext().then((context) => (this.context = context));
+                });
+            },
         );
     }
 

apps/web/client/src/components/store/editor/element/index.ts

@@ -1,7 +1,7 @@
 import type { CoreElementType, DomElement, DynamicType } from '@onlook/models';
 import type { RemoveElementAction } from '@onlook/models/actions';
 import { toast } from '@onlook/ui/sonner';
-import { makeAutoObservable } from 'mobx';
+import { makeAutoObservable, runInAction } from 'mobx';
 import type { EditorEngine } from '../engine';
 import type { FrameData } from '../frames';
 import { adaptRectToCanvas } from '../overlay/utils';
@@ -60,30 +60,41 @@ export class ElementsManager {
     }
 
     click(domEls: DomElement[]) {
-        this.editorEngine.overlay.state.removeClickRects();
-        this.clearSelectedElements();
-
-        for (const domEl of domEls) {
-            const frameData = this.editorEngine.frames.get(domEl.frameId);
-            if (!frameData) {
-                console.error('Frame data not found');
-                continue;
+        // Batch all synchronous updates for the outline rendering
+        runInAction(() => {
+            // Immediately update the visual outline for instant feedback
+            this.editorEngine.overlay.state.removeClickRects();
+            
+            // Process outline rendering first for immediate visual feedback
+            for (const domEl of domEls) {
+                const frameData = this.editorEngine.frames.get(domEl.frameId);
+                if (!frameData) {
+                    console.error('Frame data not found');
+                    continue;
+                }
+                const { view } = frameData;
+                if (!view) {
+                    console.error('No frame view found');
+                    continue;
+                }
+                const adjustedRect = adaptRectToCanvas(domEl.rect, view);
+                const isComponent = !!domEl.instanceId;
+                this.editorEngine.overlay.state.addClickRect(
+                    adjustedRect,
+                    domEl.styles,
+                    isComponent,
+                    domEl.domId,
+                );
             }
-            const { view } = frameData;
-            if (!view) {
-                console.error('No frame view found');
-                continue;
+        });
+        
+        // Update selected elements in a separate action to control reaction timing
+        runInAction(() => {
+            this.clearSelectedElements();
+            for (const domEl of domEls) {
+                this._selected.push(domEl);
             }
-            const adjustedRect = adaptRectToCanvas(domEl.rect, view);
-            const isComponent = !!domEl.instanceId;
-            this.editorEngine.overlay.state.addClickRect(
-                adjustedRect,
-                domEl.styles,
-                isComponent,
-                domEl.domId,
-            );
-            this._selected.push(domEl);
-        }
+        });
     }
 
     setHoveredElement(element: DomElement) {

apps/web/client/src/components/store/editor/overlay/index.ts

@@ -79,7 +79,7 @@ export class OverlayManager {
         }
     };
 
-    refresh = debounce(this.undebouncedRefresh, 100, { leading: true });
+    refresh = debounce(this.undebouncedRefresh, 50, { leading: true });
 
     showMeasurement() {
         this.editorEngine.overlay.removeMeasurement();