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

added the skeleton loader reusable component

Browse Source
This commit is contained in:
GURSAL PRATHAMESH APPASAHEB
2024-10-04 23:47:37 +05:30
committed by GitHub
parent 3683d4a759
commit 034dfffb85
1 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,15 +1,22 @@
import React from 'react';
const Loader: React.FC = () => {
const SkeletonLoader = ({ count = 1 }) => {
return (
<div className="flex justify-center items-center min-h-screen bg-gray-900">
<div className="relative w-20 h-20">
<div className="absolute top-0 left-0 w-16 h-16 border-t-4 border-blue-500 rounded-full animate-spin"></div>
<div className="absolute top-0 left-0 w-16 h-16 border-t-4 border-pink-500 rounded-full animate-spin delay-150"></div>
<div className="absolute top-0 left-0 w-16 h-16 border-t-4 border-green-500 rounded-full animate-spin delay-300"></div>
</div>
<div className="flex space-x-4">
{[...Array(count)].map((_, idx) => (
<div key={idx} className="p-6 w-60 h-32 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>
))}
</div>
);
};
export default Loader;
export default SkeletonLoader;
// calling function should be pass --- no. of sketeton cards
// eg . ----------->>> <SkeletonLoader count={4} />