Fix spinner y titulo de columna en tabla general

app/src/components/data/DegreeDay/index.tsx

@@ -20,12 +20,16 @@ const ResultTd = ({ value }: any) => (
 
 const DegreeDay: FC<DegreesProps> = () => {
   const [data, setData] = useState<DegreeDays[] | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const { userToken } = useContext(UserStateContext);
   const { from, to, sector } = useContext(StateContext);
 
   useEffect(() => {
     if (!userToken || !sector) return;
-    monthlyDegrees(from, to, sector, userToken).then(setData);
+    monthlyDegrees(from, to, sector, userToken).then((res) => {
+      setData(res);
+      setIsLoading(false);
+    });
   }, [from, to, userToken, sector]);
 
   const rows = data?.map((x) => (
@@ -63,7 +67,7 @@ const DegreeDay: FC<DegreesProps> = () => {
         </thead>
         <tbody>{data && rows}</tbody>
       </table>
-      {!data && (
+      {!data && isLoading && (
         <div className="d-flex py-3 justify-content-center">
           <div className="spinner-border" role="status">
             <span className="visually-hidden">Loading...</span>
@@ -72,7 +76,9 @@ const DegreeDay: FC<DegreesProps> = () => {
       )}
       {data && data.length === 0 && (
         <div className="d-flex py-3 justify-content-center">
-          <p>Sin datos</p>
+          <div role="status">
+            <p>Sin datos</p>
+          </div>
         </div>
       )}
     </section>

app/src/components/data/GeneralPerSeason/index.tsx

@@ -10,13 +10,16 @@ import { redScale, orangeScale, blueScale } from "../../../utils";
 
 const TemperaturePerSeason: FC = () => {
   const [data, setData] = useState<Summary[] | null>(null);
-
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const { sector, from, to } = useContext(DashboardContext);
   const { userToken } = useContext(UserStateContext);
 
   useEffect(() => {
     if (!sector || !userToken) return;
-    seasonsSummariesTable(from, to, sector, userToken).then(setData);
+    seasonsSummariesTable(from, to, sector, userToken).then((res) => {
+      setData(res);
+      setIsLoading(false);
+    });
   }, [from, to, sector, userToken]);
 
   const rows = data?.map((x) => (
@@ -78,7 +81,7 @@ const TemperaturePerSeason: FC = () => {
         <Header daysToMatchCurrentTemperature={true} />
         <tbody>{data && rows}</tbody>
       </table>
-      {!data && (
+      {!data && isLoading && (
         <div className="d-flex py-3 justify-content-center">
           <div className="spinner-border" role="status">
             <span className="visually-hidden">Loading...</span>
@@ -87,7 +90,9 @@ const TemperaturePerSeason: FC = () => {
       )}
       {data && data.length === 0 && (
         <div className="d-flex py-3 justify-content-center">
-          <p>Sin datos</p>
+          <div role="status">
+            <p>Sin datos</p>
+          </div>
         </div>
       )}
     </>

app/src/components/data/GeneralPerSector/index.tsx

@@ -16,12 +16,17 @@ import {
 
 const GeneralPerSector: FC = () => {
   const [data, setData] = useState<Summary[] | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const { userToken } = useContext(UserStateContext);
   const { from, to, sector } = useContext(StateContext);
 
   useEffect(() => {
     if (!userToken) return;
-    generalTable(from, to, userToken).then(setData);
+    // generalTable(from, to, userToken).then(setData);
+    generalTable(from, to, userToken).then((res) => {
+      setData(res);
+      setIsLoading(false);
+    });
   }, [from, to, userToken]);
 
   // Formato de los summaries(filas)
@@ -88,12 +93,12 @@ const GeneralPerSector: FC = () => {
   return (
     <>
       <table className={`${classes.table}`}>
-        <Header averageAccumulated />
+        <Header averageAccumulated mainColumnHeader="Finca" />
         {/* Mostrar las filas si hay data */}
         <tbody>{data && rows}</tbody>
       </table>
       {/* Si no hay data, mostrar una spinner abajo de la tabla */}
-      {!data && (
+      {!data && isLoading && (
         <div className="d-flex py-3 justify-content-center">
           <div className="spinner-border" role="status">
             <span className="visually-hidden">Loading...</span>
@@ -102,7 +107,7 @@ const GeneralPerSector: FC = () => {
       )}
       {data && data.length === 0 && (
         <div className="d-flex py-3 justify-content-center">
-          <div className="spinner-border" role="status">
+          <div role="status">
             <p>Sin datos</p>
           </div>
         </div>

app/src/components/data/Precipitation/index.tsx

@@ -21,12 +21,16 @@ const ResultTd = ({ value }: any) => (
 
 const Precipitation: FC<PrecipitationProps> = () => {
   const [data, setData] = useState<Precipitations[] | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const { userToken } = useContext(UserStateContext);
   const { from, to, sector } = useContext(StateContext);
 
   useEffect(() => {
     if (!userToken || !sector) return;
-    monthlyPrecip(from, to, sector, userToken).then(setData);
+    monthlyPrecip(from, to, sector, userToken).then((res) => {
+      setData(res);
+      setIsLoading(false);
+    });
   }, [from, to, userToken, sector]);
 
   const rows = data?.map((x) => (
@@ -63,7 +67,7 @@ const Precipitation: FC<PrecipitationProps> = () => {
         </thead>
         <tbody>{data && rows}</tbody>
       </table>
-      {!data && (
+      {!data && isLoading && (
         <div className="d-flex py-3 justify-content-center">
           <div className="spinner-border" role="status">
             <span className="visually-hidden">Loading...</span>
@@ -72,7 +76,9 @@ const Precipitation: FC<PrecipitationProps> = () => {
       )}
       {data && data.length === 0 && (
         <div className="d-flex py-3 justify-content-center">
-          <p>Sin datos</p>
+          <div role="status">
+            <p>Sin datos</p>
+          </div>
         </div>
       )}
     </section>

app/src/components/data/shared.tsx

@@ -13,15 +13,19 @@ interface tableHeaderProps {
   //Change this name
   daysToMatchCurrentTemperature?: boolean;
   averageAccumulated?: boolean;
+  mainColumnHeader?: string;
 }
 
 export const TableHeader: FC<tableHeaderProps> = ({
   daysToMatchCurrentTemperature = false,
   averageAccumulated = false,
+  mainColumnHeader = "Temporada",
 }) => {
   return (
     <thead style={{ minHeight: "90px" }}>
-      <th className={`${classes.cell} ${classes.dateCell}`}>Temporada</th>
+      <th className={`${classes.cell} ${classes.dateCell}`}>
+        {mainColumnHeader}
+      </th>
       <td style={{ padding: "0" }} className={classes.cell}>
         <div className="d-block h-100">
           <div className="h-75">