CheckingServerHealth component

public/locales/en/translations.json

@@ -92,6 +92,7 @@
   "ServerAvailability": {
     "Unavailable": "Oops. Looks like the server is currently unavailable.",
     "TryAgain": "Try again in a few seconds",
-    "Retry": "Retry"
+    "Retry": "Retry",
+    "CheckingServerHealth": "Checking server health..."
   }
 }

public/locales/ro/translations.json

@@ -83,6 +83,7 @@
   "ServerAvailability": {
     "Unavailable": "Hopa! Se pare că serverul nu este disponibil momentan.",
     "TryAgain": "Încercați din nou în câteva secunde",
-    "Retry": "Reîncercați"
+    "Retry": "Reîncercați",
+    "CheckingServerHealth": "Se verifică starea serverului..."
   }
 }

src/components/App.js

@@ -27,6 +27,7 @@ export default function App() {
   return (
     <BrowserRouter basename={process.env.PUBLIC_URL || ""}>
       <Switch>
+        <Route exact path="/" render={() => <Redirect to="/dashboard" />} />
         <PrivateRoute
           path="/server-not-available"
           component={ServerNotAvailable}

src/features/server/availability/components/CheckingServerHealth.js

@@ -0,0 +1,23 @@
+import React from "react";
+import useStyles from "../styles";
+import { Grid, Typography } from "@material-ui/core";
+import { useTranslation } from "react-i18next";
+import classnames from "classnames";
+
+const CheckingServerHealth = () => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+
+  return (
+    <Grid container className={classnames(classes.container, classes.success)}>
+      <Typography
+        variant="h1"
+        className={classnames(classes.textRow, classes.singleText)}
+      >
+        {t("ServerAvailability.CheckingServerHealth")}
+      </Typography>
+    </Grid>
+  );
+};
+
+export default CheckingServerHealth;

src/features/server/availability/components/ServerNotAvailable.js

@@ -11,7 +11,7 @@ const ServerNotAvailable = () => {
   const { t } = useTranslation();
 
   return (
-    <Grid container className={classes.container}>
+    <Grid container className={classnames(classes.container, classes.error)}>
       <Paper classes={{ root: classes.paperRoot }}>
         <div className={classes.imageFrame}>
           <img

src/features/server/availability/styles.js

@@ -8,11 +8,16 @@ export default makeStyles((theme) => ({
     flexDirection: "column",
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: theme.palette.error.dark,
     position: "absolute",
     top: 0,
     left: 0
   },
+  error: {
+    backgroundColor: theme.palette.error.dark
+  },
+  success: {
+    backgroundColor: theme.palette.success.light
+  },
   imageFrame: {
     display: "flex",
     alignItems: "center",
@@ -41,6 +46,10 @@ export default makeStyles((theme) => ({
     fontWeight: 300,
     color: theme.palette.text.hint
   },
+  singleText: {
+    fontWeight: 300,
+    color: theme.palette.info.main
+  },
   button: {
     backgroundColor: theme.palette.error.dark,
     textTransform: "none",

src/features/server/providers/ServerAvailabilityProvider.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { Redirect } from "react-router-dom";
 import { useServerApi } from "../api";
+import CheckingServerHealth from "../availability/components/CheckingServerHealth";
 
 const ServerAvailabilityProvider = ({ children }) => {
   const [ok, setOk] = useState(null);
@@ -14,7 +15,7 @@ const ServerAvailabilityProvider = ({ children }) => {
     });
   }, [checkHealth]);
 
-  if (ok === null) return <span>Checking server health...</span>;
+  if (ok === null) return <CheckingServerHealth />;
   if (ok === false) return <Redirect to="/server-not-available" />;
   return <>{children}</>;
 };