37 lines
No EOL
1.2 KiB
TypeScript
37 lines
No EOL
1.2 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
|
|
export function PDFSkeleton() {
|
|
const [showNotification, setShowNotification] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setShowNotification(true);
|
|
}, 3000);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex flex-col items-center w-full">
|
|
{showNotification && (
|
|
<div className="fixed top-4 left-1/2 transform -translate-x-1/2 bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-2 rounded shadow-lg z-50">
|
|
There might be an issue with the file import. Please try again.
|
|
</div>
|
|
)}
|
|
<div className="flex flex-col items-center w-full animate-pulse">
|
|
{/* Show 3 skeleton pages by default */}
|
|
{[1, 2, 3].map((index) => (
|
|
<div key={`skeleton_${index}`}>
|
|
{/* Page content skeleton */}
|
|
<div className="flex flex-col justify-center my-4">
|
|
<div className="bg-gray-200 shadow-lg">
|
|
{/* Approximate dimensions of a PDF page */}
|
|
<div className="w-[595px] h-[842px]"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |