Reload page when loaded

Author: Koenvh1

src/components/App.tsx

@@ -14,8 +14,8 @@ export default function App() {
   const { status, roto } = useStatus();
   const routeName = routerState.route.name;
 
-  if (!status || (status && status.error)) {
-    return <Loading error={status?.error} />
+  if (status && status.error) {
+    return <Loading status={status} />
   }
 
   return (

src/components/Loading.tsx

@@ -1,14 +1,38 @@
+import { useEffect, useState } from "react";
+import useStatus from "../hooks/useStatus";
+import { RoutinatorStatus } from "../types";
+import { API_ENDPOINT } from "../core/contants";
+
 interface LoadingProps {
-    error?: string;
+    status: RoutinatorStatus | null;
 }
 
-export default function Loading({ error }: LoadingProps) {
+export default function Loading({ status }: LoadingProps) {    
+    useEffect(() => {
+        if (status && status.error) {
+            const checkStatus = () => {
+                setTimeout(() => {      
+                    fetch(`${API_ENDPOINT}/api/v1/status`)
+                        .then((r) => r.json())
+                        .then((status) => {
+                            if (status && !status.error) {
+                                window.location.reload();
+                            } else {
+                                checkStatus();
+                            }
+                        }).catch(() => checkStatus());  
+                }, 3000)
+            };
+            checkStatus();
+        }
+    }, []);
+
     return (
         <div id="loading">
             <div>
             <img src='/src/img/routinator_logo_white.svg' alt='Routinator logo' />
             <br />
-            <p>{error || "Something went wrong"}</p>
+            <p>{status?.error || "Something went wrong"}</p>
             </div>
         </div>
     );

src/style/loading.css

@@ -15,5 +15,4 @@
 
 #loading img {
     max-width: 40rem;
-    animation: pulse 2s infinite;
 }