Mejorar experiencia en momentos de carga

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

@@ -26,6 +26,7 @@ const DegreeDay: FC<DegreesProps> = () => {
 
   useEffect(() => {
     if (!userToken || !sector) return;
+    setIsLoading(true);
     monthlyDegrees(from, to, sector, userToken).then((res) => {
       setData(res);
       setIsLoading(false);
@@ -65,9 +66,9 @@ const DegreeDay: FC<DegreesProps> = () => {
           <td className={classes.cell}>Marzo</td>
           <td className={classes.cell}>Porcentaje de datos</td>
         </thead>
-        <tbody>{data && rows}</tbody>
+        <tbody>{data && !isLoading && rows}</tbody>
       </table>
-      {!data && isLoading && (
+      {isLoading && (
         <div className="d-flex py-3 justify-content-center">
           <div className="spinner-border" role="status">
             <span className="visually-hidden">Loading...</span>

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

@@ -16,6 +16,7 @@ const TemperaturePerSeason: FC = () => {
 
   useEffect(() => {
     if (!sector || !userToken) return;
+    setIsLoading(true);
     seasonsSummariesTable(from, to, sector, userToken).then((res) => {
       setData(res);
       setIsLoading(false);
@@ -79,9 +80,9 @@ const TemperaturePerSeason: FC = () => {
       <h5>General - {data ? data[0].station.title : null}</h5>
       <table className={`${classes.table} ${classes.widthSix}`}>
         <Header daysToMatchCurrentTemperature={true} />
-        <tbody>{data && rows}</tbody>
+        <tbody>{data && !isLoading && rows}</tbody>
       </table>
-      {!data && isLoading && (
+      {isLoading && (
         <div className="d-flex py-3 justify-content-center">
           <div className="spinner-border" role="status">
             <span className="visually-hidden">Loading...</span>

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

@@ -22,6 +22,7 @@ const GeneralPerSector: FC = () => {
 
   useEffect(() => {
     if (!userToken) return;
+    setIsLoading(true);
     // generalTable(from, to, userToken).then(setData);
     generalTable(from, to, userToken).then((res) => {
       setData(res);
@@ -95,10 +96,10 @@ const GeneralPerSector: FC = () => {
       <table className={`${classes.table}`}>
         <Header averageAccumulated mainColumnHeader="Finca" />
         {/* Mostrar las filas si hay data */}
-        <tbody>{data && rows}</tbody>
+        <tbody>{data && !isLoading && rows}</tbody>
       </table>
       {/* Si no hay data, mostrar una spinner abajo de la tabla */}
-      {!data && isLoading && (
+      {isLoading && (
         <div className="d-flex py-3 justify-content-center">
           <div className="spinner-border" role="status">
             <span className="visually-hidden">Loading...</span>

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

@@ -27,6 +27,7 @@ const Precipitation: FC<PrecipitationProps> = () => {
 
   useEffect(() => {
     if (!userToken || !sector) return;
+    setIsLoading(true);
     monthlyPrecip(from, to, sector, userToken).then((res) => {
       setData(res);
       setIsLoading(false);
@@ -65,9 +66,9 @@ const Precipitation: FC<PrecipitationProps> = () => {
           <td className={classes.cell}>Marzo</td>
           <td className={classes.cell}>Porcentaje de datos</td>
         </thead>
-        <tbody>{data && rows}</tbody>
+        <tbody>{data && !isLoading && rows}</tbody>
       </table>
-      {!data && isLoading && (
+      {isLoading && (
         <div className="d-flex py-3 justify-content-center">
           <div className="spinner-border" role="status">
             <span className="visually-hidden">Loading...</span>