From 96bb970d81f4a6c3a233459ade0425f2e5c69214 Mon Sep 17 00:00:00 2001
From: IO420 <320154041@pcpuma.acatlan.unam.mx>
Date: Tue, 9 Dec 2025 15:59:38 -0600
Subject: [PATCH] added loading

---
 src/components/Equipo_Computo/Pregunta2.tsx   | 57 ++++++++++++++-----
 .../Equipo_Computo/pregunta2.module.scss      | 22 ++++---
 2 files changed, 57 insertions(+), 22 deletions(-)

diff --git a/src/components/Equipo_Computo/Pregunta2.tsx b/src/components/Equipo_Computo/Pregunta2.tsx
index e3e0680..abbe420 100644
--- a/src/components/Equipo_Computo/Pregunta2.tsx
+++ b/src/components/Equipo_Computo/Pregunta2.tsx
@@ -27,6 +27,7 @@ const PLATFORM_LABELS: Record<PlatformKey, string> = {
   "apple-laptop": "Computadoras portátiles Plataforma Apple",
   servers: "Servidores de alto rendimiento",
 };
+
 interface RawOsEntry {
   sistema_operativo: string;
   total: string;
@@ -82,9 +83,9 @@ function transformPlatform(
 
   const clean = (str: string) =>
     str
-      .normalize("NFKD")
-      .replace(/\u00A0/g, " ")
-      .trim();
+      .normalize?.("NFKD")
+      .replace?.(/\u00A0/g, " ")
+      .trim?.() ?? str;
 
   const mapRaw: Record<string, number> = {};
   raw.forEach((item) => {
@@ -107,8 +108,10 @@ function transformPlatform(
 export default function Pregunta2() {
   const [activeTab, setActiveTab] = useState<PlatformKey>("pc-desktop");
   const [data, setData] = useState<PlatformData | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
 
   const cargarDatos = async (baja: boolean) => {
+    setLoading(true);
     const token = Cookies.get("token");
     const headers = { Authorization: `Bearer ${token}` };
 
@@ -123,26 +126,43 @@ export default function Pregunta2() {
         const json = res.data;
 
         const formatted: PlatformData = {
-          "pc-desktop": transformPlatform(json[0], "pc-desktop"),
-          "apple-desktop": transformPlatform(json[1], "apple-desktop"),
-          "pc-laptop": transformPlatform(json[2], "pc-laptop"),
-          "apple-laptop": transformPlatform(json[3], "apple-laptop"),
-          servers: transformPlatform(json[4], "servers"),
+          "pc-desktop": transformPlatform(json[0] || [], "pc-desktop"),
+          "apple-desktop": transformPlatform(json[1] || [], "apple-desktop"),
+          "pc-laptop": transformPlatform(json[2] || [], "pc-laptop"),
+          "apple-laptop": transformPlatform(json[3] || [], "apple-laptop"),
+          servers: transformPlatform(json[4] || [], "servers"),
         };
 
         setData(formatted);
+        setLoading(false);
       })
-      .catch((err) => console.error("Error cargando datos", err))
+      .catch((err) => {
+        console.error("Error cargando datos", err);
+        setData({
+          "pc-desktop": transformPlatform([], "pc-desktop"),
+          "apple-desktop": transformPlatform([], "apple-desktop"),
+          "pc-laptop": transformPlatform([], "pc-laptop"),
+          "apple-laptop": transformPlatform([], "apple-laptop"),
+          servers: transformPlatform([], "servers"),
+        });
+        setLoading(false);
+      });
   };
 
   useEffect(() => {
     cargarDatos(false);
   }, []);
 
+  const rowsToRender: OsEntry[] = loading
+    ? PLATFORM_OS_LIST[activeTab].map((os) => ({ os, count: 0 }))
+    : data
+    ? data[activeTab]
+    : PLATFORM_OS_LIST[activeTab].map((os) => ({ os, count: 0 }));
+
   return (
     <div className={styles.container_P1}>
       <div className={styles["contenedor-censo_p1"]}>
-        Censo de equipos de cómputo - Sitema Operativo
+        Censo de equipos de cómputo - Sistema Operativo
       </div>
 
       <div className={styles["pregunta-cuadro_p1"]}>
@@ -170,9 +190,12 @@ export default function Pregunta2() {
             ))}
           </div>
 
-          {/* Tabla */}
-          <div className={styles["data-table_P1"]}>
-            {data && data[activeTab].map((item, index) => (
+          <div
+            className={`${styles["data-table_P1"]} ${
+              loading ? styles.loadingBlur : ""
+            }`}
+          >
+            {rowsToRender.map((item, index) => (
               <div
                 key={index}
                 className={`${styles["data-row_P1"]} ${
@@ -180,7 +203,13 @@ export default function Pregunta2() {
                 }`}
               >
                 <div className={styles["os-name_P1"]}>{item.os}</div>
-                <div className={styles["count-box_P1"]}>{item.count}</div>
+                <div
+                  className={`${styles["count-box_P1"]} ${
+                    loading ? styles.skeleton : ""
+                  }`}
+                >
+                  {loading ? " " : item.count}
+                </div>
               </div>
             ))}
           </div>
diff --git a/src/components/Equipo_Computo/pregunta2.module.scss b/src/components/Equipo_Computo/pregunta2.module.scss
index 0cfd5a9..4408499 100644
--- a/src/components/Equipo_Computo/pregunta2.module.scss
+++ b/src/components/Equipo_Computo/pregunta2.module.scss
@@ -131,13 +131,13 @@
   }
 
   .count-box_P1 {
-    background: #ffffff;
     border: 1px solid #0056b3;
     padding: 6px 14px;
     font-weight: 600;
     font-size: 15px;
     text-align: center;
     border-radius: 5px;
+    min-height: 33px;
     min-width: 70px;
   }
 
@@ -151,13 +151,19 @@
   }
 }
 
-.loadingBlur {
-  filter: blur(4px);
-  opacity: 0.5;
-  pointer-events: none;
-  transition: 0.3s ease;
-  height: 100%;
-  width: 100%;
+.skeleton {
+  background: linear-gradient(90deg,
+      #e0e0e0 0%,
+      #f5f5f5 50%,
+      #e0e0e0 100%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: 8px;
+}
+
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
 }
 
 @media (max-width: 700px) {