perf(dashboard): optimize CSS transitions and add entrance animations
Performance and polish improvements across dashboard components: Transition optimizations (reduces reflow/repaint overhead): - OptionButton: transition-all → transition-[transform,border-color, background-color,box-shadow] - QuestionBlock: Add transition-colors to textarea, transition-all → transition-[transform,filter] on send button - SimpleInput: Same pattern as QuestionBlock - Sidebar: transition-all → transition-colors for project buttons Animation additions: - App: Add animate-fade-in-up to loading and error state containers - MessageBubble: Make fade-in-up animation conditional on non-compact mode to avoid animation spam in card preview Using specific transition properties instead of transition-all tells the browser exactly which properties to watch, avoiding unnecessary style recalculation on unrelated property changes. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -17,7 +17,7 @@ export function MessageBubble({ msg, userBg, compact = false, formatTime }) {
|
||||
const maxW = compact ? 'max-w-[92%]' : 'max-w-[86%]';
|
||||
|
||||
return html`
|
||||
<div class="flex ${isUser ? 'justify-end' : 'justify-start'} animate-fade-in-up">
|
||||
<div class="flex ${isUser ? 'justify-end' : 'justify-start'} ${compact ? '' : 'animate-fade-in-up'}">
|
||||
<div
|
||||
class="${maxW} rounded-2xl ${pad} ${
|
||||
isUser
|
||||
|
||||
Reference in New Issue
Block a user