improve loading states:

* app loader
 * specific loaders with spinner

app/core/layouts/layout/footer.tsx

@@ -29,7 +29,7 @@ function NavLink({ path, label, icon }: NavLinkProps) {
 
 	return (
 		<div className="flex flex-col items-center justify-around h-full">
-			<Link href={path}>
+			<Link href={path} prefetch={false}>
 				<a
 					className={clsx("flex flex-col items-center", {
 						"text-primary-500": isActiveRoute,

app/core/layouts/layout/index.tsx

@@ -1,5 +1,5 @@
 import type { ErrorInfo, FunctionComponent } from "react";
-import { Component } from "react";
+import { Component, Suspense } from "react";
 import {
 	Head,
 	withRouter,
@@ -14,6 +14,7 @@ import type { WithRouterProps } from "next/dist/client/with-router";
 import appLogger from "../../../../integrations/logger";
 
 import Footer from "./footer";
+import Loader from "./loader";
 
 type Props = {
 	title: string;
@@ -23,7 +24,7 @@ type Props = {
 
 const logger = appLogger.child({ module: "Layout" });
 
-const Layout: FunctionComponent<Props> = ({ children, title, pageTitle = title, hideFooter = false }) => {
+const AppLayout: FunctionComponent<Props> = ({ children, title, pageTitle = title, hideFooter = false }) => {
 	return (
 		<>
 			{pageTitle ? (
@@ -32,16 +33,18 @@ const Layout: FunctionComponent<Props> = ({ children, title, pageTitle = title,
 				</Head>
 			) : null}
 
-			<div className="h-full w-full overflow-hidden fixed bg-gray-100">
-				<div className="flex flex-col w-full h-full">
-					<div className="flex flex-col flex-1 w-full overflow-y-auto">
-						<main className="flex flex-col flex-1 my-0 h-full">
-							<ErrorBoundary>{children}</ErrorBoundary>
-						</main>
+			<Suspense fallback={<Loader />}>
+				<div className="h-full w-full overflow-hidden fixed bg-gray-100">
+					<div className="flex flex-col w-full h-full">
+						<div className="flex flex-col flex-1 w-full overflow-y-auto">
+							<main className="flex flex-col flex-1 my-0 h-full">
+								<ErrorBoundary>{children}</ErrorBoundary>
+							</main>
+						</div>
+						{!hideFooter ? <Footer /> : null}
 					</div>
-					{!hideFooter ? <Footer /> : null}
 				</div>
-			</div>
+			</Suspense>
 		</>
 	);
 };
@@ -109,4 +112,4 @@ const ErrorBoundary = withRouter(
 	},
 );
 
-export default Layout;
+export default AppLayout;

app/core/layouts/layout/loader.module.css

@@ -0,0 +1,8 @@
+#gradientCanvas {
+	width: 100%;
+	height: 100%;
+	--gradient-color-1: #c3e4ff;
+	--gradient-color-2: #6ec3f4;
+	--gradient-color-3: #eae2ff;
+	--gradient-color-4: #b9beff;
+}

app/core/layouts/layout/loader.tsx

@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+
+import Logo from "../../components/logo";
+import { Gradient } from "./loader-gradient.js";
+
+import styles from "./loader.module.css";
+
+export default function Loader() {
+	useEffect(() => {
+		const gradient = new Gradient();
+		// @ts-ignore
+		gradient.initGradient(`#${styles.gradientCanvas}`);
+	}, []);
+
+	return (
+		<div className="min-h-screen min-w-screen relative">
+			<div className="relative z-10 min-h-screen flex flex-col justify-center py-12 px-4 sm:px-6 lg:px-8">
+				<div className="flex flex-col sm:mx-auto sm:w-full sm:max-w-sm">
+					<Logo className="mx-auto h-12 w-12" />
+					<span className="mt-2 text-center text-lg leading-9 text-gray-900">Loading up Shellphone...</span>
+				</div>
+			</div>
+			<canvas id={styles.gradientCanvas} className="absolute top-0 z-0" />
+		</div>
+	);
+}