.

client/src/app/quotes/components/PDFGenerationLoading.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { ErrorMessage } from "@/lib/hooks/useDownloader/types";
+import { cn } from "@/lib/utils";
+import { Button, Card, CardContent, CardHeader, CardTitle, Progress } from "@/ui";
+import { FileText, Loader2, XCircleIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+
+interface PDFGenerationLoadingProps {
+  className?: string;
+  isInProgress: boolean;
+  percentage: number;
+  elapsed: number;
+  cancel: () => void;
+  error: ErrorMessage;
+}
+
+export const PDFGenerationLoading = ({
+  isInProgress,
+  percentage,
+  elapsed,
+  cancel,
+  error,
+  className,
+}: PDFGenerationLoadingProps) => {
+  const [estimatedTime, setEstimatedTime] = useState(10);
+
+  useEffect(() => {
+    if (isInProgress && percentage > 0) {
+      const estimatedTotal = (elapsed / percentage) * 100;
+      setEstimatedTime(Math.max(0, Math.round(estimatedTotal - elapsed)));
+    }
+  }, [isInProgress, percentage, elapsed]);
+
+  if (!isInProgress && !error?.errorMessage) return null;
+
+  return (
+    <Card className={cn("overflow-hidden", className)}>
+      <CardHeader>
+        <CardTitle className='flex items-center justify-between'>
+          {error?.errorMessage ? "Error en la generación del PDF" : "Generando PDF"}
+          {isInProgress && <Loader2 className='w-4 h-4 animate-spin' />}
+          {error?.errorMessage && <XCircleIcon className='w-4 h-4 text-destructive' />}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {error?.errorMessage ? (
+          <div className='text-destructive'>{error?.errorMessage}</div>
+        ) : (
+          <div className='flex flex-col items-center space-y-4'>
+            <div className='relative w-32 h-40 overflow-hidden rounded-lg bg-muted'>
+              <div
+                className='absolute bottom-0 left-0 right-0 transition-all duration-1000 ease-out bg-primary'
+                style={{ height: `${percentage}%` }}
+              />
+              <FileText
+                className='absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 text-primary-foreground'
+                size={48}
+              />
+            </div>
+            <Progress value={percentage} className='w-full' />
+            <div className='text-sm text-center text-muted-foreground'>
+              <p>Progreso: {percentage}%</p>
+              <div className='hidden'>
+                <p>Tiempo transcurrido: {elapsed} segundos</p>
+                {estimatedTime > 0 && <p>Tiempo estimado restante: {estimatedTime} segundos</p>}
+              </div>
+            </div>
+            <Button variant='destructive' onClick={cancel} className='hidden'>
+              Cancelar generación
+            </Button>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

client/src/app/quotes/components/QuotePDFPreview.tsx

@@ -1,9 +1,10 @@
 import { PDFViewer } from "@/components";
 import { cn } from "@/lib/utils";
-import { Card, CardContent, CardHeader, Skeleton } from "@/ui";
+import { Card, CardContent } from "@/ui";
 import { IListQuotes_Response_DTO } from "@shared/contexts";
 import { useCallback, useEffect, useState } from "react";
 import { useQuotes } from "../hooks";
+import { PDFGenerationLoading } from "./PDFGenerationLoading";
 
 const QuotePDFPreview = ({
   quote,
@@ -16,7 +17,7 @@ const QuotePDFPreview = ({
   //const { toast } = useToast();
   const { useReport, getQuotePDFFilename, useDownloader } = useQuotes();
   const { download } = useDownloader();
-  const { report, preview, isInProgress } = useReport();
+  const { report, preview, isInProgress, ...otherReportProps } = useReport();
   const [URLReport, setURLReport] = useState<string | undefined>(undefined);
 
   /*const handleFinishDownload = useCallback(() => {
@@ -66,17 +67,7 @@ const QuotePDFPreview = ({
   }
 
   if (isInProgress) {
-    return (
-      <Card className={cn("overflow-hidden flex flex-col", className)}>
-        <CardHeader>
-          <Skeleton className='w-full h-8' />
-          <Skeleton className='w-full h-8' />
-        </CardHeader>
-        <CardContent className='py-4'>
-          <Skeleton className='w-full aspect-[3/4] relative bg-white shadow flex-1' />
-        </CardContent>
-      </Card>
-    );
+    return <PDFGenerationLoading isInProgress={isInProgress} {...otherReportProps} />;
   }
 
   return (