add ErrorBoundary, Loading in Navigation

src/components/EmptyState.tsx

@@ -1,7 +1,5 @@
-import clsx from "clsx";
 import Div100vh from "react-div-100vh";
 
-import { makeStyles, createStyles } from "@material-ui/styles";
 import {
   Grid,
   GridProps,
@@ -12,33 +10,6 @@ import {
 import { OverridableComponent } from "@material-ui/core/OverridableComponent";
 import ErrorIcon from "@material-ui/icons/ErrorOutline";
 
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    root: {
-      height: "100%",
-      width: "100%",
-      textAlign: "center",
-
-      ...theme.typography.body2,
-    },
-
-    content: {
-      "&&": { maxWidth: "25em" },
-    },
-
-    icon: {
-      color: theme.palette.action.active,
-      fontSize: "3rem",
-    },
-
-    message: {
-      marginTop: theme.spacing(1),
-    },
-
-    basicIcon: { display: "block" },
-  })
-);
-
 export interface IEmptyStateProps extends Partial<GridProps> {
   /** Primary message displayed under the icon */
   message?: React.ReactNode;
@@ -65,13 +36,11 @@ export default function EmptyState({
   basic = false,
   ...props
 }: IEmptyStateProps) {
-  const classes = useStyles({});
-
   if (basic)
     return (
       <Grid container alignItems="center" spacing={1} {...props}>
         <Grid item>
-          <Icon className={classes.basicIcon} />
+          <Icon style={{ display: "block" }} />
         </Grid>
 
         <Grid item>
@@ -89,18 +58,36 @@ export default function EmptyState({
       justifyContent="center"
       alignItems="center"
       component={fullScreen ? Div100vh : "div"}
-      style={{ height: fullScreen ? "100rvh" : "100%" }}
       {...props}
-      className={clsx(classes.root, props.className)}
+      style={{
+        width: "100%",
+        height: fullScreen ? "100rvh" : "100%",
+        textAlign: "center",
+        ...props.style,
+      }}
     >
-      <Grid item className={classes.content}>
-        <Icon className={classes.icon} />
+      <Grid
+        item
+        sx={{
+          maxWidth: "25em",
+          px: 2,
+
+          "& .icon": {
+            color: "action.active",
+            fontSize: "3rem",
+            mx: "auto",
+            display: "block",
+            mb: 1,
+          },
+        }}
+      >
+        <Icon className="icon" />
 
         <Typography
           component="h1"
           variant="h6"
-          className={classes.message}
           gutterBottom
+          style={{ cursor: "default" }}
         >
           {message}
         </Typography>

src/components/Loading.tsx

@@ -1,21 +1,7 @@
 import Div100vh from "react-div-100vh";
 
-import { makeStyles, createStyles } from "@material-ui/styles";
-import { Grid, CircularProgress, Typography } from "@material-ui/core";
-
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    root: {
-      height: "100%",
-      width: "100%",
-      textAlign: "center",
-    },
-    progress: { color: theme.palette.action.active },
-    content: { maxWidth: "25em" },
-    message: { marginTop: theme.spacing(1) },
-  })
-);
-interface ILoading {
+import { Stack, StackProps,CircularProgress, Typography } from "@material-ui/core";
+interface ILoadingProps extends Partial<StackProps> {
   message?: string;
   fullScreen?: boolean;
 }
@@ -23,25 +9,25 @@ interface ILoading {
 export default function Loading({
   message = "Loading",
   fullScreen = false,
-}: ILoading) {
-  const classes = useStyles({});
-
+  ...props
+}: ILoadingProps) {
   return (
-    <Grid
-      container
-      className={classes.root}
-      direction="column"
+    <Stack
       justifyContent="center"
       alignItems="center"
       component={fullScreen ? Div100vh : "div"}
-      style={{ height: fullScreen ? "100rvh" : "100%" }}
+      {...props}
+      style={{
+        width: "100%",
+        height: fullScreen ? "100rvh" : "100%",
+        alignItems: "center",
+        ...props.style,
+      }}
     >
-      <Grid item className={classes.content}>
-        <CircularProgress className={classes.progress} />
-        <Typography variant="h6" className={classes.message}>
-          {message}
-        </Typography>
-      </Grid>
-    </Grid>
+      <CircularProgress sx={{ color: "action.active", mb: 1 }} />
+      <Typography variant="h6" component="div" style={{ userSelect: "none" }}>
+        {message}
+      </Typography>
+    </Stack>
   );
 }

src/components/Navigation/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useState } from "react";
+import { ReactNode, useState, Suspense } from "react";
 
 import {
   useScrollTrigger,
@@ -12,6 +12,8 @@ import MenuIcon from "@material-ui/icons/Menu";
 
 import NavDrawer from "./NavDrawer";
 import UserMenu from "./UserMenu";
+import ErrorBoundary from "components/ErrorBoundary";
+import Loading from "components/Loading";
 
 import { name } from "@root/package.json";
 import { projectId } from "@src/firebase";
@@ -103,7 +105,15 @@ export default function Navigation({
         currentSection={currentSection}
       />
 
-      {children}
+      <ErrorBoundary style={{ marginTop: -APP_BAR_HEIGHT }}>
+        <Suspense
+          fallback={
+            <Loading fullScreen style={{ marginTop: -APP_BAR_HEIGHT }} />
+          }
+        >
+          {children}
+        </Suspense>
+      </ErrorBoundary>
     </>
   );
 }