add better loading dialog for auth

Author: mrrosoff

src/components/app/desktop/BootUp.tsx

@@ -178,7 +178,7 @@ const DriveInfo = (props: { state: number }) => {
                 <Grid>
                     <header>
                         <Typography>
-                            Detecting Primary Drive (C) . . . . . .
+                            Detecting Primary Drive (/dev/sda1) . . . . . .
                             {props.state >= 13 ? (
                                 <span style={{ color: "#2BC903" }}> SUCCESS </span>
                             ) : null}
@@ -190,7 +190,7 @@ const DriveInfo = (props: { state: number }) => {
                 <Grid>
                     <header>
                         <Typography>
-                            Detecting Secondary Drive (D) . . . . . .
+                            Detecting Secondary Drive (/dev/sda2) . . . . . .
                             {props.state >= 15 ? (
                                 <span style={{ color: "#2BC903" }}> SUCCESS </span>
                             ) : null}

src/components/terminal/Terminal.tsx

@@ -36,13 +36,13 @@ const Terminal = (
     const [emulatorState, setEmulatorState] = useState(props.emulatorState);
     const [renderedOutputs, setRenderedOutputs] = useState([]);
     const [_, setHistoryIndex] = useState(-1);
-    const [visibleCursor, setVisibleCursor] = useState<boolean>(true);
+    const [loadingDots, setLoadingDots] = useState(0);
 
     let emulator = new Emulator();
 
     useEffect(() => {
         const interval = setInterval(() => {
-            setVisibleCursor((visible) => !visible);
+            setLoadingDots((dots) => (dots + 1) % 4);
         }, 600);
         return () => clearInterval(interval);
     }, []);
@@ -267,13 +267,15 @@ const Terminal = (
                             Password:
                         </Box>
                         {passwordPrompt.loading ? (
-                            <>...</>
+                            <Box component="span" style={{ color: props.theme.outputColor }}>
+                                {".".repeat(loadingDots + 1)}
+                            </Box>
                         ) : (
                             <Box
                                 width={8}
                                 height={18}
                                 sx={{
-                                    visibility: visibleCursor ? "visible" : "hidden",
+                                    visibility: loadingDots % 2 === 0 ? "visible" : "hidden",
                                     background: "#FFFFFF"
                                 }}
                             />