Feat Modo Oscuro y Otras Estéticas

frontend/src/components/Dashboard.tsx

@@ -1,3 +1,4 @@
+// frontend/src/components/Dashboard.tsx
 import { useState, useEffect } from 'react';
 import toast from 'react-hot-toast';
 import { dashboardService } from '../services/apiService';
@@ -5,8 +6,9 @@ import type { DashboardStats } from '../types/interfaces';
 import OsChart from './OsChart';
 import SectorChart from './SectorChart';
 import CpuChart from './CpuChart';
-import RamChart from './RamChart'; // <-- 1. Importar el nuevo gráfico
+import RamChart from './RamChart';
 import styles from './Dashboard.module.css';
+import skeletonStyles from './Skeleton.module.css';
 
 const Dashboard = () => {
   const [stats, setStats] = useState<DashboardStats | null>(null);
@@ -24,13 +26,24 @@ const Dashboard = () => {
         setIsLoading(false);
       });
   }, []);
+
   if (isLoading) {
     return (
-      <div className={styles.dashboardHeader}>
-        <h2>Cargando estadísticas...</h2>
+      <div>
+        <div className={styles.dashboardHeader}>
+          <h2>Dashboard de Inventario</h2>
+        </div>
+        <div className={styles.statsGrid}>
+          {/* Replicamos la estructura de la grilla con esqueletos */}
+          <div className={`${styles.chartContainer} ${skeletonStyles.skeleton}`}></div>
+          <div className={`${styles.chartContainer} ${skeletonStyles.skeleton}`}></div>
+          <div className={`${styles.chartContainer} ${skeletonStyles.skeleton}`}></div>
+          <div className={`${styles.chartContainer} ${skeletonStyles.skeleton}`}></div>
+        </div>
       </div>
     );
   }
+
   if (!stats) {
     return (
       <div className={styles.dashboardHeader}>