Add loading indicator when loading passkey prompt

Author: mrrosoff

src/components/terminal/Terminal.tsx

@@ -74,9 +74,9 @@ const Terminal = (
         if (adminConsoleMode?.screen && adminConsoleMode.provisionForm) {
             const form = adminConsoleMode.provisionForm;
 
-            if (form.currentField === 'flavorName' || form.currentField === 'color') {
+            if (form.currentField === "flavorName" || form.currentField === "color") {
                 e.preventDefault();
-                const pastedText = e.clipboardData.getData('text');
+                const pastedText = e.clipboardData.getData("text");
 
                 emulatorState.setAdminConsoleMode({
                     ...adminConsoleMode,
@@ -206,6 +206,7 @@ const Terminal = (
 		0 updates are ready to be installed.
 	`;
 
+    const passwordPrompt = emulatorState.getPasswordPromptState();
     return (
         <>
             {showMOTD && (
@@ -260,19 +261,23 @@ const Terminal = (
                         <AdminConsole emulatorState={emulatorState} theme={props.theme} />
                     </Box>
                 )}
-                {emulatorState.getPasswordPromptState() ? (
+                {passwordPrompt ? (
                     <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                         <Box component="span" style={{ color: props.theme.outputColor }}>
                             Password:
                         </Box>
-                        <Box
-                            width={8}
-                            height={18}
-                            sx={{
-                                visibility: visibleCursor ? "visible" : "hidden",
-                                background: "#FFFFFF"
-                            }}
-                        />
+                        {passwordPrompt.loading ? (
+                            <>...</>
+                        ) : (
+                            <Box
+                                width={8}
+                                height={18}
+                                sx={{
+                                    visibility: visibleCursor ? "visible" : "hidden",
+                                    background: "#FFFFFF"
+                                }}
+                            />
+                        )}
                         <input
                             ref={ref}
                             type="text"

src/javascript-terminal/commands/sudo.tsx

@@ -53,6 +53,7 @@ export const authenticateWithPasskey = async (
     if (!promptState) return;
 
     try {
+        emulatorState.setPasswordPromptState({ ...promptState, loading: true });
         const { data: authOptions } = await axios.post(`${API_URL}/admin/passkey-auth-options`);
 
         const authResponse = await startAuthentication({ optionsJSON: authOptions });

src/javascript-terminal/emulator-state/EmulatorState.ts

@@ -45,6 +45,7 @@ export type AdminConsoleState = {
 export type PasswordPromptState = {
     targetCommand: string;
     targetOptions: string[];
+    loading?: boolean;
 };
 
 const TAB_COUNT_KEY = "tabCount";