added new restriction and fixed button dowload

src/components/Dowload/Reporte.tsx

@@ -2,15 +2,20 @@
 
 import styles from "./style.module.css";
 import Cookies from "js-cookie";
+import { useState } from "react";
 
 export default function DownloadReporteXLSX() {
+  const [loading, setLoading] = useState(false);
+
   const handleDownload = async () => {
-          const token = Cookies.get("token");
-      const headers = { Authorization: `Bearer ${token}` };
+    setLoading(true); // 🔹 Activa loader
+    const token = Cookies.get("token");
+    const headers = { Authorization: `Bearer ${token}` };
 
     try {
       const response = await fetch(
-        `${process.env.NEXT_PUBLIC_API_URL}/equipos/reporteXLSX`,{headers}
+        `${process.env.NEXT_PUBLIC_API_URL}/equipos/reporteXLSX`,
+        { headers }
       );
 
       if (!response.ok) {
@@ -31,12 +36,22 @@ export default function DownloadReporteXLSX() {
     } catch (error) {
       console.error(error);
       alert("Hubo un problema al descargar el archivo.");
+    } finally {
+      setLoading(false); // 🔹 Reactiva botón y oculta loader
     }
   };
 
   return (
-    <button className={styles.downloadBtn} onClick={handleDownload}>
-      Descargar XLSX
+    <button
+      className={styles.downloadBtn}
+      onClick={handleDownload}
+      disabled={loading} // 🔹 Botón deshabilitado
+    >
+      {loading ? (
+        <div className={styles.loader}></div> // 🔹 Icono de cargando
+      ) : (
+        <img src="/excel.svg" alt="Excel" className={styles.iconExcel} width={30} height={30}/>
+      )}
     </button>
   );
 }