LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-30 09:03:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

(feat:docs) skeleton loader

Browse Source
This commit is contained in:
ManishMadan2882
2025-08-04 16:35:24 +05:30
parent 8b4f6553f3
commit 45745c2a47
4 changed files with 154 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/components/SkeletonLoader.tsx
View File

@@ -8,7 +8,9 @@ interface SkeletonLoaderProps {
| 'logs'
| 'table'
| 'chatbot'
| 'dropdown';
| 'dropdown'
| 'chunkCards'
| 'sourceCards';
}
const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
@@ -182,6 +184,51 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
</>
);
const renderChunkCards = () => (
<>
{Array.from({ length: count }).map((_, index) => (
<div
key={`chunk-skel-${index}`}
className="relative flex h-[197px] flex-col rounded-[5.86px] border border-[#D1D9E0] dark:border-[#6A6A6A] overflow-hidden w-full max-w-[487px] animate-pulse"
>
<div className="w-full">
<div className="flex w-full items-center justify-between border-b border-[#D1D9E0] bg-[#F6F8FA] dark:bg-[#27282D] dark:border-[#6A6A6A] px-4 py-3">
<div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-20"></div>
</div>
<div className="px-4 pt-4 pb-6 space-y-3">
<div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-full"></div>
<div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-11/12"></div>
<div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-5/6"></div>
<div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-4/5"></div>
<div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-3/4"></div>
<div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-2/3"></div>
</div>
</div>
</div>
))}
</>
);
const renderSourceCards = () => (
<>
{Array.from({ length: count }).map((_, idx) => (
<div
key={`source-skel-${idx}`}
className="flex h-[123px] w-[308px] flex-col justify-between rounded-2xl bg-[#F9F9F9] p-3 dark:bg-[#383838] animate-pulse"
>
<div className="flex w-full items-center justify-between gap-2">
<div className="h-4 w-3/5 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="h-6 w-6 rounded bg-gray-300 dark:bg-gray-600"></div>
</div>
<div className="mt-auto flex items-center justify-between pt-3">
<div className="h-3 w-24 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="h-3 w-20 rounded bg-gray-300 dark:bg-gray-600"></div>
</div>
</div>
))}
</>
);
const componentMap = {
table: renderTable,
chatbot: renderChatbot,
@@ -189,8 +236,11 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
logs: renderLogs,
default: renderDefault,
analysis: renderAnalysis,
chunkCards: renderChunkCards,
sourceCards: renderSourceCards,
};
const render = componentMap[component] || componentMap.default;
return <>{render()}</>;