Add screen when Routinator is not initialised yet

Author: Koenvh1

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 && status.error)) {
+    return <Loading error={status?.error} />
+  }
+
   return (
     <RouterContext.Provider value={routerState}>
       <Nav />

src/components/Loading.tsx

@@ -0,0 +1,15 @@
+interface LoadingProps {
+    error?: string;
+}
+
+export default function Loading({ error }: LoadingProps) {
+    return (
+        <div id="loading">
+            <div>
+            <img src='/src/img/routinator_logo_white.svg' alt='Routinator logo' />
+            <br />
+            <p>{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,19 @@
+#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;
+    animation: pulse 2s infinite;
+}

src/types.ts

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