fix(ui): remove AnimatePresence from sidebar tabs to fix content switching
Some checks failed
CI / Build Frontend (push) Has been cancelled
CI / Lint & TypeCheck (push) Has been cancelled
CI / Unit Tests (push) Has been cancelled
CI / Rust Check (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
Some checks failed
CI / Build Frontend (push) Has been cancelled
CI / Lint & TypeCheck (push) Has been cancelled
CI / Unit Tests (push) Has been cancelled
CI / Rust Check (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
The framer-motion AnimatePresence with mode="wait" caused the sidebar content to get stuck on the conversations list when switching to the agents tab. The React state updated correctly but the DOM did not re-render. Replaced with simple conditional rendering which is more reliable and removes the framer-motion dependency from this component.
This commit is contained in:
@@ -1,19 +1,10 @@
|
||||
import { useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
SquarePen, MessageSquare, Bot, Search, X, Settings
|
||||
} from 'lucide-react';
|
||||
import { ConversationList } from './ConversationList';
|
||||
import { CloneManager } from './CloneManager';
|
||||
import { useChatStore } from '../store/chatStore';
|
||||
import { defaultTransition } from '../lib/animations';
|
||||
|
||||
// Simple fade variants for sidebar tab content (no staggerChildren)
|
||||
const sidebarTabVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: { opacity: 1, transition: { duration: 0.15 } },
|
||||
exit: { opacity: 0, transition: { duration: 0.1 } },
|
||||
};
|
||||
|
||||
export type MainViewType = 'chat';
|
||||
|
||||
@@ -96,18 +87,8 @@ export function Sidebar({
|
||||
|
||||
{/* Content area */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={activeTab}
|
||||
variants={sidebarTabVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="exit"
|
||||
transition={defaultTransition}
|
||||
className="h-full overflow-y-auto"
|
||||
>
|
||||
{activeTab === 'conversations' && (
|
||||
<div className="p-2">
|
||||
<div className="p-2 h-full overflow-y-auto">
|
||||
{/* Search in conversations */}
|
||||
<div className="relative mb-2">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
@@ -130,9 +111,7 @@ export function Sidebar({
|
||||
<ConversationList searchQuery={searchQuery} />
|
||||
</div>
|
||||
)}
|
||||
{activeTab === 'clones' && <CloneManager />}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
{activeTab === 'clones' && <div className="h-full overflow-y-auto"><CloneManager /></div>}
|
||||
</div>
|
||||
|
||||
{/* Bottom user bar */}
|
||||
|
||||
Reference in New Issue
Block a user