fix: replace transition-all with specific transition properties for better performance

- Replace transition-all with transition-[width] in Sidebar.tsx for width animations
- Replace transition-all with specific properties in animated-tabs.tsx for hover/active indicators
- Replace transition-all with transition-[background-color,border-color,box-shadow] in navbar.tsx
- Replace transition-all with transition-[width] in audio.tsx volume bar
- Replace transition-all with transition-[background-color,border-color,color] in thread.tsx
- Replace transition-all with transition-[box-shadow] in all tool-ui status cards (28+ files)

This reduces unnecessary browser layout/paint work by only animating the specific
properties that change, avoiding expensive recalculations for properties like
width, height, margin, and padding that don't need animation.

Fixes #1147
This commit is contained in:
SohamBhattacharjee2003 2026-04-08 05:36:19 +05:30
parent 63855e0757
commit 4a5af63715
32 changed files with 41 additions and 41 deletions

View file

@ -198,7 +198,7 @@ function ApprovalCard({
}, [handleApprove]);
return (
<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
{/* Header */}
<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
<div className="flex items-center gap-2">