From 79dd65d16fe1040210e58ae6b7eb59df7d881718 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Thu, 26 Aug 2021 19:04:02 +1000
Subject: [PATCH] add reload button to chunk load errors

---
 www/src/components/EmptyState.tsx    | 17 +++++++++--------
 www/src/components/ErrorBoundary.tsx | 20 ++++++++++++++++++++
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/www/src/components/EmptyState.tsx b/www/src/components/EmptyState.tsx
index 18b383d2..429a164e 100644
--- a/www/src/components/EmptyState.tsx
+++ b/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>
   );
diff --git a/www/src/components/ErrorBoundary.tsx b/www/src/components/ErrorBoundary.tsx
index ccd76943..4d799cb6 100644
--- a/www/src/components/ErrorBoundary.tsx
+++ b/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 };
   }