info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-25 08:35:42 +02:00
Code Issues Releases Wiki Activity

wip: skeleton loading

Browse Source
This commit is contained in:
Arik Chakma
2025-06-10 11:29:28 +06:00
parent d19298a457
commit 4a9a8f6e91
2 changed files with 35 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/AIChatHistory/ListChatHistory.tsx
View File

@@ -9,6 +9,7 @@ import { Loader2Icon, PlusIcon, SearchIcon } from 'lucide-react';
import { DateTime } from 'luxon'; import { DateTime } from 'luxon';
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import { useDebounceValue } from '../../hooks/use-debounce'; import { useDebounceValue } from '../../hooks/use-debounce';
import { ListChatHistorySkeleton } from './ListChatHistorySkeleton';
type ListChatHistoryProps = { type ListChatHistoryProps = {
activeChatHistoryId?: string; activeChatHistoryId?: string;
@@ -64,6 +65,10 @@ export function ListChatHistory(props: ListChatHistoryProps) {
); );
}, [data?.pages]); }, [data?.pages]);
if (isLoading) {
return <ListChatHistorySkeleton />;
}
return ( return (
<div className="w-[255px] shrink-0 border-r border-gray-200 bg-white p-2"> <div className="w-[255px] shrink-0 border-r border-gray-200 bg-white p-2">
<button <button

30
src/components/AIChatHistory/ListChatHistorySkeleton.tsx Normal file
View File

@@ -0,0 +1,30 @@
export function ListChatHistorySkeleton() {
return (
<div className="w-[255px] shrink-0 border-r border-gray-200 bg-white p-2">
<div className="h-9 w-full animate-pulse rounded-lg bg-gray-200" />
<div className="relative mt-2">
<div className="h-9 w-full animate-pulse rounded-lg bg-gray-200" />
<div className="absolute top-1/2 left-2.5 -translate-y-1/2">
<div className="h-4 w-4 animate-pulse rounded-full bg-gray-300" />
</div>
</div>
<div className="mt-6 space-y-4">
{['Today', 'Last 7 Days', 'Older'].map((group) => (
<div key={group}>
<div className="ml-2 h-4 w-16 animate-pulse rounded bg-gray-200" />
<ul className="mt-1 space-y-0.5 px-2">
{[1, 2, 3].map((i) => (
<li
key={i}
className="h-9 animate-pulse rounded-lg bg-gray-100"
></li>
))}
</ul>
</div>
))}
</div>
</div>
);
}