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

added customize loader for each section

Browse Source
This commit is contained in:
Prathamesh Gursal
2024-10-09 01:28:54 +05:30
parent 57cfafeb34
commit 5b5281e50c
5 changed files with 112 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/settings/APIKeys.tsx
View File

@@ -107,7 +107,7 @@ export default function APIKeys() {
<div className="mt-[27px] w-full">
<div className="w-full overflow-x-auto">
{loading ? (
<SkeletonLoader />
<SkeletonLoader count={1} component={'chatbot'} />
) : (
<table className="table-default">
<thead>

6
frontend/src/settings/Analytics.tsx
View File

@@ -223,7 +223,7 @@ export default function Analytics() {
className="flex flex-row items-center justify-end"
></div>
{loadingMessages ? (
<SkeletonLoader count={1} />
<SkeletonLoader count={1} component={'analysis'} />
) : (
<AnalyticsChart
data={{
@@ -274,7 +274,7 @@ export default function Analytics() {
className="flex flex-row items-center justify-end"
></div>
{loadingTokens ? (
<SkeletonLoader />
<SkeletonLoader count={1} component={'analysis'} />
) : (
<AnalyticsChart
data={{
@@ -327,7 +327,7 @@ export default function Analytics() {
className="flex flex-row items-center justify-end"
></div>
{loadingFeedback ? (
<SkeletonLoader />
<SkeletonLoader count={1} component={'analysis'} />
) : (
<AnalyticsChart
data={{

2
frontend/src/settings/Documents.tsx
View File

@@ -64,7 +64,7 @@ const Documents: React.FC<DocumentsProps> = ({
<div className="flex flex-col relative">
<div className="z-10 w-full overflow-x-auto">
{loading ? (
<SkeletonLoader />
<SkeletonLoader count={1} />
) : (
<table className="table-default">
<thead>

2
frontend/src/settings/Logs.tsx
View File

@@ -105,7 +105,7 @@ export default function Logs() {
<div className="mt-8">
{loadingLogs ? (
<SkeletonLoader />
<SkeletonLoader component={'logs'} />
) : (
<LogsTable logs={logs} setPage={setPage} />
)}

138
frontend/src/utils/loader.tsx
View File

@@ -2,9 +2,13 @@ import React, { useState, useEffect } from 'react';
interface SkeletonLoaderProps {
count?: number;
component?: 'default' | 'analysis' | 'chatbot' | 'logs';
}
const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({ count = 1 }) => {
const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
count = 1,
component = 'default',
}) => {
const [skeletonCount, setSkeletonCount] = useState(count);
useEffect(() => {
@@ -30,38 +34,108 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({ count = 1 }) => {
return (
<div className="flex flex-col space-y-4">
{[...Array(skeletonCount)].map((_, idx) => (
<div
key={idx}
className={`p-6 ${skeletonCount === 1 ? 'w-full' : 'w-60'} bg-gray-800 rounded-3xl animate-pulse`}
>
<div className="space-y-4">
<div>
<div className="h-4 bg-gray-500 rounded mb-2 w-3/4"></div>{' '}
<div className="h-4 bg-gray-500 rounded mb-2 w-5/6"></div>{' '}
<div className="h-4 bg-gray-500 rounded mb-2 w-1/2"></div>{' '}
<div className="h-4 bg-gray-500 rounded mb-2 w-3/4"></div>{' '}
<div className="h-4 bg-gray-500 rounded mb-2 w-full"></div>{' '}
{component === 'default'
? [...Array(skeletonCount)].map((_, idx) => (
<div
key={idx}
className={`p-6 ${skeletonCount === 1 ? 'w-full' : 'w-60'} dark:bg-raisin-black rounded-3xl animate-pulse`}
>
<div className="space-y-4">
<div>
<div className="h-4 bg-gray-600 rounded mb-2 w-3/4"></div>
<div className="h-4 bg-gray-600 rounded mb-2 w-5/6"></div>
<div className="h-4 bg-gray-600 rounded mb-2 w-1/2"></div>
<div className="h-4 bg-gray-600 rounded mb-2 w-3/4"></div>
<div className="h-4 bg-gray-600 rounded mb-2 w-full"></div>
</div>
<div className="border-t border-gray-600 my-4"></div>
<div>
<div className="h-4 bg-gray-600 rounded mb-2 w-2/3"></div>
<div className="h-4 bg-gray-600 rounded mb-2 w-1/4"></div>
<div className="h-4 bg-gray-600 rounded mb-2 w-full"></div>
</div>
<div className="border-t border-gray-600 my-4"></div>
<div>
<div className="h-4 bg-gray-600 rounded mb-2 w-5/6"></div>
<div className="h-4 bg-gray-600 rounded mb-2 w-1/3"></div>
<div className="h-4 bg-gray-600 rounded mb-2 w-2/3"></div>
<div className="h-4 bg-gray-600 rounded mb-2 w-full"></div>
</div>
<div className="border-t border-gray-600 my-4"></div>
<div className="h-4 bg-gray-600 rounded w-3/4 mb-2"></div>
<div className="h-4 bg-gray-600 rounded w-5/6 mb-2"></div>
</div>
</div>
<div className="border-t border-gray-600 my-4"></div>{' '}
<div>
<div className="h-4 bg-gray-500 rounded mb-2 w-2/3"></div>{' '}
<div className="h-4 bg-gray-500 rounded mb-2 w-1/4"></div>{' '}
<div className="h-4 bg-gray-500 rounded mb-2 w-full"></div>{' '}
</div>
<div className="border-t border-gray-600 my-4"></div>{' '}
<div>
<div className="h-4 bg-gray-500 rounded mb-2 w-5/6"></div>{' '}
<div className="h-4 bg-gray-500 rounded mb-2 w-1/3"></div>{' '}
<div className="h-4 bg-gray-500 rounded mb-2 w-2/3"></div>{' '}
<div className="h-4 bg-gray-500 rounded mb-2 w-full"></div>{' '}
</div>
<div className="border-t border-gray-600 my-4"></div>{' '}
<div className="h-4 bg-gray-500 rounded w-3/4 mb-2"></div>{' '}
<div className="h-4 bg-gray-500 rounded w-5/6 mb-2"></div>{' '}
</div>
</div>
))}
))
: component === 'analysis'
? [...Array(skeletonCount)].map((_, idx) => (
<div
key={idx}
className="p-6 w-full dark:bg-raisin-black rounded-3xl animate-pulse"
>
<div className="space-y-6">
<div className="space-y-2">
<div className="h-4 bg-gray-600 rounded w-1/3 mb-4"></div>
<div className="grid grid-cols-6 gap-2 items-end">
<div className="h-32 bg-gray-600 rounded"></div>
<div className="h-24 bg-gray-600 rounded"></div>
<div className="h-40 bg-gray-600 rounded"></div>
<div className="h-28 bg-gray-600 rounded"></div>
<div className="h-36 bg-gray-600 rounded"></div>
<div className="h-20 bg-gray-600 rounded"></div>
</div>
</div>
<div className="space-y-2">
<div className="h-4 bg-gray-600 rounded w-1/4 mb-4"></div>
<div className="h-32 bg-gray-600 rounded"></div>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="h-4 bg-gray-600 rounded w-full"></div>
<div className="h-4 bg-gray-600 rounded w-full"></div>
</div>
</div>
</div>
))
: component === 'chatbot'
? [...Array(skeletonCount)].map((_, idx) => (
<div
key={idx}
className="p-4 w-full max-w-sm mx-auto animate-pulse"
>
<div className="flex items-start space-x-2">
<div className="w-8 h-8 bg-gray-600 rounded-full"></div>
<div className="flex-1 space-y-2">
<div className="p-3 rounded-lg bg-gray-600">
<div className="h-4 bg-gray-500 rounded w-3/4 mb-2"></div>
<div className="h-4 bg-gray-500 rounded w-2/4"></div>
</div>
<div className="p-3 rounded-lg bg-gray-600">
<div className="h-4 bg-gray-500 rounded w-5/6 mb-2"></div>
<div className="h-4 bg-gray-500 rounded w-3/4"></div>
</div>
<div className="flex space-x-1">
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
</div>
</div>
</div>
</div>
))
: [...Array(skeletonCount)].map((_, idx) => (
<div
key={idx}
className="p-6 w-full dark:bg-raisin-black rounded-3xl animate-pulse"
>
<div className="space-y-4">
<div className="h-4 bg-gray-600 rounded w-1/2"></div>
<div className="h-4 bg-gray-600 rounded w-5/6"></div>
<div className="h-4 bg-gray-600 rounded w-3/4"></div>
<div className="h-4 bg-gray-600 rounded w-2/3"></div>
<div className="h-4 bg-gray-600 rounded w-1/4"></div>
</div>
</div>
))}
</div>
);
};