add reload button to chunk load errors

www/src/components/EmptyState.tsx

@@ -4,7 +4,7 @@ import Div100vh from "react-div-100vh";
 import { makeStyles, createStyles } from "@material-ui/styles";
 import { Grid, GridProps, Typography, SvgIconTypeMap } from "@material-ui/core";
 import { OverridableComponent } from "@material-ui/core/OverridableComponent";
-import ErrorIcon from "@material-ui/icons/Error";
+import ErrorIcon from "@material-ui/icons/ErrorOutlined";
 
 const useStyles = makeStyles((theme) =>
   createStyles({
@@ -17,7 +17,7 @@ const useStyles = makeStyles((theme) =>
     content: { maxWidth: "25em" },
 
     icon: {
-      color: theme.palette.text.disabled,
+      color: theme.palette.action.active,
       fontSize: "3.5rem",
     },
 
@@ -86,15 +86,16 @@ export default function EmptyState({
       <Grid item className={classes.content}>
         <Icon className={classes.icon} />
 
-        <Typography variant="h6" className={classes.message} gutterBottom>
+        <Typography
+          component="h1"
+          variant="h6"
+          className={classes.message}
+          gutterBottom
+        >
           {message}
         </Typography>
 
-        {description && (
-          <Typography color="textSecondary" variant="body2">
-            {description}
-          </Typography>
-        )}
+        {description && <Typography variant="body2">{description}</Typography>}
       </Grid>
     </Grid>
   );

www/src/components/ErrorBoundary.tsx

@@ -1,11 +1,31 @@
 import React from "react";
 import EmptyState, { IEmptyStateProps } from "./EmptyState";
 
+import { Stack, Button } from "@material-ui/core";
+import ReloadIcon from "@material-ui/icons/Refresh";
 class ErrorBoundary extends React.Component<IEmptyStateProps> {
   state = { hasError: false, errorMessage: "" };
 
   static getDerivedStateFromError(error: Error) {
     // Update state so the next render will show the fallback UI.
+    // Special error message for chunk loading failures:
+    if (error.message.startsWith("Loading chunk"))
+      return {
+        hasError: true,
+        errorMessage: (
+          <Stack spacing={2} alignItems="center">
+            <span>{error.message}</span>
+            <Button
+              variant="outlined"
+              color="secondary"
+              startIcon={<ReloadIcon />}
+            >
+              Reload
+            </Button>
+          </Stack>
+        ),
+      };
+
     return { hasError: true, errorMessage: error.message };
   }