chore: fix state lag on hover

Author: adithyaakrishna

apps/sim/app/(landing)/components/hero/components/icon-button.tsx

@@ -9,6 +9,7 @@ interface IconButtonProps {
   style?: React.CSSProperties
   'aria-label': string
   isAutoHovered?: boolean
+  highlightFromParent?: boolean
 }
 
 export function IconButton({
@@ -18,17 +19,23 @@ export function IconButton({
   style,
   'aria-label': ariaLabel,
   isAutoHovered = false,
+  highlightFromParent = false,
 }: IconButtonProps) {
+  const showOwnHighlight = !highlightFromParent && isAutoHovered
+  const hoverHighlight = !highlightFromParent
+    ? 'hover:border-[#E5E5E5] hover:shadow-[0_2px_4px_0_rgba(0,0,0,0.08)]'
+    : ''
+
   return (
     <button
       type='button'
       aria-label={ariaLabel}
       onClick={onClick}
       onMouseEnter={onMouseEnter}
       className={`flex items-center justify-center rounded-xl border p-2 outline-none transition-all duration-300 ${
-        isAutoHovered
+        showOwnHighlight
           ? 'border-[#E5E5E5] shadow-[0_2px_4px_0_rgba(0,0,0,0.08)]'
-          : 'border-transparent hover:border-[#E5E5E5] hover:shadow-[0_2px_4px_0_rgba(0,0,0,0.08)]'
+          : `border-transparent ${hoverHighlight}`
       }`}
       style={style}
     >

apps/sim/app/(landing)/components/hero/hero.tsx

@@ -448,7 +448,7 @@ export default function Hero() {
                 onClick={() => handleServiceClick(service.key as keyof typeof SERVICE_TEMPLATES)}
                 onMouseEnter={() => setLastHoveredIndex(index)}
                 style={service.style}
-                isAutoHovered={!isUserHovering && index === autoHoverIndex}
+                highlightFromParent
               >
                 <Icon className='h-5 w-5 sm:h-6 sm:w-6' />
               </IconButton>