Add screen when Routinator is not initialised yet

src/components/App.tsx

@@ -7,12 +7,17 @@ import Metrics from './Metrics';
 import useStatus, { StatusContext } from '../hooks/useStatus';
 import Repositories from './Repositories';
 import Connections from './Connections';
+import Loading from './Loading';
 
 export default function App() {
   const routerState = useRouter();
   const { status, roto } = useStatus();
   const routeName = routerState.route.name;
 
+  if (status && status.error) {
+    return <Loading status={status} />
+  }
+
   return (
     <RouterContext.Provider value={routerState}>
       <Nav />

src/components/Loading.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+import useStatus from "../hooks/useStatus";
+import { RoutinatorStatus } from "../types";
+import { API_ENDPOINT } from "../core/contants";
+
+interface LoadingProps {
+    status: RoutinatorStatus | null;
+}
+
+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>{status?.error || "Something went wrong"}</p>
+            </div>
+        </div>
+    );
+}

src/style/index.css

@@ -12,3 +12,4 @@
 @import './prefix-check-sidebar.css';
 @import './prefix-check.css';
 @import './help.css';
+@import './loading.css';

src/style/loading.css

@@ -0,0 +1,28 @@
+#loading {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    min-height: 100vh;
+    background-color: var(--blue-dark);
+    background: radial-gradient(circle,rgba(0, 31, 109, 1) 0%, rgba(0, 25, 87, 1) 100%);
+    color: var(--white);
+    font-weight: bold;
+    font-size: 2rem;
+}
+
+#loading img {
+    max-width: 40rem;
+}
+
+#loading p {
+    animation: pulsate 2s infinite;
+}
+
+@keyframes pulsate {
+  from { opacity: 1; }
+  50% { opacity: 0; }
+  to { opacity: 1; }
+}

src/types.ts

@@ -1,4 +1,5 @@
 export interface RoutinatorStatus {
+  error?: string;
   version: string;
   serial: number;
   now: Date;