add initial server loading message

frontend/src/apis/server.endpoints.ts

@@ -84,10 +84,13 @@ namespace RestAPI {
 	}
 	//============== other
 	export async function emailSupport(data: any) {
-		return await jsonRequest("/mail/email-support", "POST", data);
+		return jsonRequest("/mail/email-support", "POST", data);
 	}
 	export async function markAllOrdersAsShipped() {
-		return await jsonRequest("/orders/dev/markAllOrdersAsShipped");
+		return jsonRequest("/orders/dev/markAllOrdersAsShipped");
+	}
+	export async function isAlive() {
+		return jsonRequest("/health");
 	}
 }
 

frontend/src/pages/App.tsx

@@ -1,5 +1,5 @@
 import { AnimatePresence } from "framer-motion";
-import { useContext, useEffect, useLayoutEffect } from "react";
+import { useContext, useEffect, useLayoutEffect, useState } from "react";
 import { Outlet, useNavigate } from "react-router-dom";
 import { notifyInfoToast } from "../components/alerts/toasts/toast.notifier";
 import IconButton from "../components/buttons/IconButton";
@@ -8,20 +8,25 @@ import NavLink from "../components/navbar/NavLink";
 import Navbar from "../components/navbar/Navbar";
 import { AuthCtx } from "../store/auth.context";
 import Frame from "./misc/Frame";
+import RestAPI from "../apis/server.endpoints";
 
 function App() {
 	const auth = useContext(AuthCtx);
 	const navigate = useNavigate()
-
+	const [waitingForServer, setWaitingForServer] = useState(true)
 	const clientSideLogout = () => {
 		auth?.deleteSessionData()
 		notifyInfoToast("Your session timed out. Please login again")
 		navigate("/login") //FIX: navigate does not seem to be working properly...need to force a reload for it to take an effect
 		location.reload()
 	}
 
+	//Check if server is alive
+	useLayoutEffect(() => {
+		RestAPI.isAlive().then(res => res && setWaitingForServer(false)).catch(e => { throw new Error(e) })
+	}, [])
+	//Check Session validity
 	useEffect(() => {
-
 		const id = auth?.isLoggedIn ? setInterval(() => {
 
 			if (!auth?.checkSessionValidity()) {
@@ -33,8 +38,8 @@ function App() {
 
 	}, [auth?.user])
 
+	// Redirect on invalid session
 	useLayoutEffect(() => {
-
 		const isSessionValid = auth?.checkSessionValidity()
 
 		if (!isSessionValid && !location.pathname.match(new RegExp("^\/$|^\/login|^\/item", "i"))) {
@@ -66,7 +71,15 @@ function App() {
 	return (
 		<>
 			<Frame />
-			<main id="main">
+
+			{waitingForServer && <main id="main" className="booting">
+				<h1>Brewing tea ...</h1>
+				<h3>We're brewing up something special for you!</h3>
+				<p> Due to some technical limitations of the free tiers in our hosting platforms, the website can take up to 50s to load 😔</p>
+				<p> You can read more about this at the <a href="https://github.com/rafa-lopes-pt/tea-shop" target="_blank" className="link">github repository</a></p>
+			</main>
+			}
+			{!waitingForServer && <main id="main">
 
 				{auth?.isLoggedIn ? AuthenticatedNav : UnauthenticatedNav}
 
@@ -80,7 +93,7 @@ function App() {
 				<AnimatePresence>
 					<Outlet></Outlet>
 				</AnimatePresence>
-			</main >
+			</main >}
 		</>
 	);
 }

frontend/src/sass/base/_typography.scss

@@ -46,3 +46,9 @@ h4 {
 		font-size: 1.05rem;
 	}
 }
+
+.link {
+	color: colors.$secondary;
+	text-decoration: underline;
+	user-select: text;
+}

frontend/src/sass/pages/_app.scss

@@ -36,6 +36,15 @@
 		box-shadow: inset 0px 0px 250px 20px colors.$bg;
 	}
 
+	&.booting {
+		display: flex;
+		flex-direction: column;
+		place-content: center;
+		place-items: center;
+		padding: 1rem;
+		text-align: center;
+	}
+
 	@include media-query.small-screen() {
 		grid-template-areas:
 			"content"