Disable navigation during the build. Add notification for users that …

…it is normal for builds to take longer
ExpressLRS · Feb 14, 2021 · 975edc4 · 975edc4
1 parent 9fdc231
commit 975edc4
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/src/ui/components/Sidebar/index.tsx b/src/ui/components/Sidebar/index.tsx
@@ -32,7 +32,11 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const Sidebar: FunctionComponent = () => {
+interface SidebarProps {
+  navigationEnabled: boolean;
+}
+
+const Sidebar: FunctionComponent<SidebarProps> = ({ navigationEnabled }) => {
   const styles = useStyles();
 
   const location = useLocation();
@@ -59,6 +63,7 @@ const Sidebar: FunctionComponent = () => {
             selected={configuratorActive}
             className={styles.menuItem}
             button
+            disabled={!navigationEnabled}
           >
             <ListItemIcon>
               <BuildIcon />
@@ -85,6 +90,7 @@ const Sidebar: FunctionComponent = () => {
             selected={logsActive}
             className={styles.menuItem}
             button
+            disabled={!navigationEnabled}
           >
             <ListItemIcon>
               <ListIcon />

diff --git a/src/ui/views/ConfiguratorView/index.tsx b/src/ui/views/ConfiguratorView/index.tsx
@@ -85,6 +85,9 @@ const useStyles = makeStyles((theme) => ({
   button: {
     marginRight: `${theme.spacing(2)} !important`,
   },
+  longBuildDurationWarning: {
+    marginBottom: theme.spacing(1),
+  },
 }));
 
 enum ViewState {
@@ -238,6 +241,31 @@ const ConfiguratorView: FunctionComponent = () => {
     }
   }, [response]);
 
+  const [
+    longBuildDurationWarning,
+    setLongBuildDurationWarning,
+  ] = useState<boolean>(false);
+  const buildInProgressRef = useRef(buildInProgress);
+  buildInProgressRef.current = buildInProgress;
+  const slowBuildTimeoutRef = useRef<number | null>(null);
+  useEffect(() => {
+    if (buildInProgressRef.current) {
+      slowBuildTimeoutRef.current = window.setTimeout(() => {
+        setLongBuildDurationWarning(true);
+      }, 15 * 1000);
+    } else {
+      setLongBuildDurationWarning(false);
+      if (slowBuildTimeoutRef.current !== null) {
+        clearTimeout(slowBuildTimeoutRef.current);
+      }
+    }
+    return () => {
+      if (slowBuildTimeoutRef.current !== null) {
+        clearTimeout(slowBuildTimeoutRef.current);
+      }
+    };
+  }, [buildInProgress]);
+
   const reset = () => {
     logsRef.current = [];
     progressNotificationsRef.current = [];
@@ -333,7 +361,7 @@ const ConfiguratorView: FunctionComponent = () => {
 
   return (
     <main className={styles.root}>
-      <Sidebar />
+      <Sidebar navigationEnabled={!buildInProgress} />
       <div className={styles.content}>
         <Header />
         <Container className={styles.main}>
@@ -428,6 +456,14 @@ const ConfiguratorView: FunctionComponent = () => {
                   <CardTitle icon={<SettingsIcon />} title="Logs" />
                   <Divider />
                   <CardContent>
+                    {longBuildDurationWarning && (
+                      <div className={styles.longBuildDurationWarning}>
+                        <ShowAlerts
+                          severity="warning"
+                          messages="Sometimes builds take at least a few minutes. It is normal, especially for the first time builds."
+                        />
+                      </div>
+                    )}
                     <Logs data={logs} />
                   </CardContent>
                   <Divider />

diff --git a/src/ui/views/LogsView/index.tsx b/src/ui/views/LogsView/index.tsx
@@ -34,7 +34,7 @@ const LogsView: FunctionComponent = () => {
   };
   return (
     <main className={styles.root}>
-      <Sidebar />
+      <Sidebar navigationEnabled />
       <div className={styles.content}>
         <Header />
         <Container className={styles.main}>

diff --git a/src/ui/views/SettingsView/index.tsx b/src/ui/views/SettingsView/index.tsx
@@ -29,7 +29,7 @@ const SettingsView: FunctionComponent = () => {
   const styles = useStyles();
   return (
     <main className={styles.root}>
-      <Sidebar />
+      <Sidebar navigationEnabled />
       <div className={styles.content}>
         <Header />
         <Container className={styles.main}>