Staging

src/app/(demo)/previsao-de-chuva/v1/[...modelView]/page.tsx

@@ -18,10 +18,12 @@ const ModelView = ({ params }: ModelViewProps) => {
   const [view] = params.modelView;
   const [data, setData] = useState<any>(null);
   const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const time_horizon_ = "1h";
 
   useEffect(() => {
     const fetchData = async () => {
+      setIsLoading(true);
       try {
         const rootUrl = process.env.NEXT_PUBLIC_ENV === 'production'
           ? process.env.NEXT_PUBLIC_ROOT_URL_PROD
@@ -31,15 +33,27 @@ const ModelView = ({ params }: ModelViewProps) => {
         const result = await response.json();
         setData(result);
       } catch (error) {
-        console.error('Error fetching data:', error);
+        setError("Failed to fetch data");
+      } finally {
+        setIsLoading(false);
       }
     };
 
     fetchData();
   }, [view]);
 
   if (error) {
-    return <div>{error}</div>;
+    return (
+      <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-black bg-opacity-50">
+        <p className="text-white mb-4">{error}</p>
+        <button
+          className="px-4 py-2 bg-blue-500 text-white rounded"
+          onClick={() => location.reload()} // Simple refresh to retry
+        >
+          Algo deu errado. Tente novamente.
+        </button>
+      </div>
+    );
   }
 
   const product = data?.product || {};
@@ -60,6 +74,11 @@ const ModelView = ({ params }: ModelViewProps) => {
 
   return (
     <ModelLayout title="Modelo">
+      {isLoading && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+          <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-blue-500"></div>
+        </div>
+      )}
       <>
         <ModelLayer name={name} modelView={view} time_horizon={time_horizon_} />
         <ColorLabel colorStops={productLabel} unit={unit} />

src/app/(demo)/radar/mendanha/[...radarView]/page.tsx

@@ -30,10 +30,12 @@ const RadarView = ({ params }: RadarViewProps) => {
   const [indice, view] = params.radarView;
   const [data, setData] = useState<any>(null);
   const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   // const indice = "reflectivity".toLowerCase();  // forço o valor do índice
 
   useEffect(() => {
     const fetchData = async () => {
+      setIsLoading(true);
       try {
         const rootUrl = process.env.NEXT_PUBLIC_ENV === 'production'
           ? process.env.NEXT_PUBLIC_ROOT_URL_PROD
@@ -44,16 +46,27 @@ const RadarView = ({ params }: RadarViewProps) => {
         setData(result);
       }
       catch (error) {
-        // console.error('Error fetching data:', error);
-        // setError('Failed to fetch data');
+        setError("Failed to fetch data");
+      } finally {
+        setIsLoading(false);
       }
     };
 
     fetchData();
   }, [indice]);
 
   if (error) {
-    return <div>{error}</div>;
+    return (
+      <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-black bg-opacity-50">
+        <p className="text-white mb-4">{error}</p>
+        <button
+          className="px-4 py-2 bg-blue-500 text-white rounded"
+          onClick={() => location.reload()} // Simple refresh to retry
+        >
+          Algo deu errado. Tente novamente.
+        </button>
+      </div>
+    );
   }
 
   const product = data?.product || {};
@@ -74,6 +87,11 @@ const RadarView = ({ params }: RadarViewProps) => {
 
   return (
     <RadarLayout title="Radar">
+      {isLoading && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+          <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-blue-500"></div>
+        </div>
+      )}
       {
         <>
           <RadarLayer name={name} radarView={indice} />

src/app/(demo)/satelite/[...sateliteView]/page.tsx

@@ -8,41 +8,51 @@ import SatelliteLayer from "@/components/satelite-map";
 import ColorLabel from "@/components/color-label";
 import { LineChartComponent } from "@/components/ui/line-chart";
 
-
 interface SateliteViewProps {
   params: {
     sateliteView: string[];
   };
 }
 
 const SateliteView = ({ params }: SateliteViewProps) => {
-
   const [indice, view] = params.sateliteView;
   const [data, setData] = useState<any>(null);
   const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
 
   useEffect(() => {
     const fetchData = async () => {
+      setIsLoading(true); // Start loading
       try {
-        const rootUrl = process.env.NEXT_PUBLIC_ENV === 'production'
+        const rootUrl = process.env.NEXT_PUBLIC_ENV === "production"
           ? process.env.NEXT_PUBLIC_ROOT_URL_PROD
           : process.env.NEXT_PUBLIC_ROOT_URL_DEV;
         const apiUrl = `${rootUrl}satellite/info/${indice.toLowerCase()}`;
         const response = await fetch(apiUrl);
         const result = await response.json();
         setData(result);
-      }
-      catch (error) {
-        // console.error('Error fetching data:', error);
-        // setError('Failed to fetch data');
+      } catch (error) {
+        setError("Failed to fetch data");
+      } finally {
+        setIsLoading(false); // Stop loading
       }
     };
 
     fetchData();
   }, [indice]);
 
   if (error) {
-    return <div>{error}</div>;
+    return (
+      <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-black bg-opacity-50">
+        <p className="text-white mb-4">{error}</p>
+        <button
+          className="px-4 py-2 bg-blue-500 text-white rounded"
+          onClick={() => location.reload()} // Simple refresh to retry
+        >
+          Algo deu errado. Tente novamente.
+        </button>
+      </div>
+    );
   }
 
   const product = data?.product || {};
@@ -63,18 +73,27 @@ const SateliteView = ({ params }: SateliteViewProps) => {
 
   return (
     <SateliteLayout title="Satélite" view={view} indice={indice}>
-      {
-        view == "mapa" ? (
-          <>
-            <SatelliteLayer name={name} sateliteView={indice} />
-            <ColorLabel colorStops={productLabel} unit={unit} />
-          </>
-        ) : (
-          <LineChartComponent unit={unit} valueRange={valueRange} stepRange={stepRange} name={name} sateliteView={indice} />
-        )
-      }
+      {isLoading && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+          <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-blue-500"></div>
+        </div>
+      )}
+      {view === "mapa" ? (
+        <>
+          <SatelliteLayer name={name} sateliteView={indice} />
+          <ColorLabel colorStops={productLabel} unit={unit} />
+        </>
+      ) : (
+        <LineChartComponent
+          unit={unit}
+          valueRange={valueRange}
+          stepRange={stepRange}
+          name={name}
+          sateliteView={indice}
+        />
+      )}
     </SateliteLayout>
   );
 };
 
-export default SateliteView;
+export default SateliteView;

src/components/time-slider-previsao.tsx

@@ -54,7 +54,7 @@ export function TimeSliderPrevisao({
           onTimeChange(newValue);
           return newValue;
         });
-      }, 1200);
+      }, 3600);
     } else if (interval) {
       clearInterval(interval);
     }