47dac2e8b5
Upgrade React 18.3.1 → 19.2.4 with full type compatibility. Changes: - react, react-dom → ^19.0.0 - @types/react, @types/react-dom → ^19.0.0 - lucide-react → ^0.577.0 (React 19 type fixes) - @tiptap/* → ^3.20.4 (React 19 support) - useRef calls now require explicit initial value (undefined) - RefObject types updated for React 19 (includes null) - MutableRefObject → RefObject (deprecated in 19) - act() import moved from react-dom/test-utils to react - Scoped JSX namespace imports added where needed
45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
import type { JSX } from 'react';
|
|
/**
|
|
* Loading skeleton for ChatHistory while conversation is loading.
|
|
* Industrial shimmer with organic line widths — no generic pulse.
|
|
*/
|
|
export const ChatHistoryLoadingState = (): JSX.Element => {
|
|
const rows = [
|
|
{ user: ['85%', '60%'], ai: ['92%', '70%', '82%', '45%'] },
|
|
{ user: ['75%', '92%', '40%'], ai: ['88%', '65%', '78%'] },
|
|
{ user: ['95%', '55%'], ai: ['72%', '85%', '60%', '92%', '35%'] },
|
|
];
|
|
|
|
return (
|
|
<div className="flex flex-1 items-center justify-center overflow-hidden bg-surface">
|
|
<div className="w-full max-w-5xl space-y-8 px-6">
|
|
{rows.map((row, i) => (
|
|
<div key={i} className="space-y-6">
|
|
{/* User message skeleton — right aligned */}
|
|
<div className="flex justify-end">
|
|
<div className="w-2/3 space-y-2">
|
|
{row.user.map((width, j) => (
|
|
<div
|
|
key={j}
|
|
className="skeleton-shimmer ml-auto h-3 rounded-sm"
|
|
style={{ width, backgroundColor: 'var(--skeleton-base)' }}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
{/* AI response skeleton — left aligned with border accent */}
|
|
<div className="space-y-2.5 border-l-2 border-border pl-3">
|
|
{row.ai.map((width, j) => (
|
|
<div
|
|
key={j}
|
|
className="skeleton-shimmer h-3 rounded-sm"
|
|
style={{ width, backgroundColor: 'var(--skeleton-base)' }}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|