LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-12-01 01:23:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

make single loader more responsive

Browse Source
This commit is contained in:
Prathamesh Gursal
2024-10-08 01:19:26 +05:30
parent 453c653975
commit b59170078d
6 changed files with 71 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,21 +1,64 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
interface SkeletonLoaderProps {
count?: number; // Optional prop to define the number of skeleton loaders
count?: number;
}
const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({ count = 1 }) => {
const [skeletonCount, setSkeletonCount] = useState(count);
useEffect(() => {
const handleResize = () => {
const windowWidth = window.innerWidth;
if (windowWidth > 1024) {
setSkeletonCount(1);
} else if (windowWidth > 768) {
setSkeletonCount(count);
} else {
setSkeletonCount(Math.min(count, 2));
}
};
handleResize();
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, [count]);
return (
<div className="flex space-x-4">
{[...Array(count)].map((_, idx) => (
<div className="flex flex-col space-y-4">
{[...Array(skeletonCount)].map((_, idx) => (
<div
key={idx}
className="p-6 w-60 h-32 bg-gray-800 rounded-3xl animate-pulse"
className={`p-6 ${skeletonCount === 1 ? 'w-full' : 'w-60'} bg-gray-800 rounded-3xl animate-pulse`}
>
<div className="space-y-4">
<div className="w-3/4 h-4 bg-gray-500 rounded"></div>
<div className="w-full h-4 bg-gray-500 rounded"></div>
<div className="w-5/6 h-4 bg-gray-500 rounded"></div>
<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>{' '}
</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>
))}
@@ -24,6 +67,3 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({ count = 1 }) => {
};
export default SkeletonLoader;
// calling function should be pass --- no. of sketeton cards
// eg . ----------->>> <SkeletonLoader count={4} />