improved loading ux

Author: murrayju

src/components/DockerSetup.tsx

@@ -3,6 +3,7 @@
 // ============================================================================
 
 import type { SelectOption } from '@opentui/core';
+import { useKeyboard } from '@opentui/react';
 import { useEffect, useMemo, useState } from 'react';
 import {
   checkDockerStatus,
@@ -176,6 +177,12 @@ export function DockerSetup({
     onComplete({ type: 'cancelled' });
   };
 
+  useKeyboard((key) => {
+    if (key.name === 'escape') {
+      handleCancel();
+    }
+  });
+
   // ---- Checking State ----
   if (state.type === 'checking') {
     return (
@@ -199,9 +206,12 @@ export function DockerSetup({
             padding: 1,
             flexDirection: 'column',
             flexGrow: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
           }}
         >
-          <text style={{ fg: '#00cc00' }}>Docker is running!</text>
+          <text style={{ fg: '#0c0' }}>Docker is running!</text>
+          <text style={{ fg: '#555555', marginTop: 1 }}>Press Esc to exit</text>
         </box>
       </box>
     );
@@ -214,7 +224,8 @@ export function DockerSetup({
     return (
       <Loading
         title={title}
-        message={`${state.message}\nThis may take a minute while ${providerName} initializes`}
+        message={state.message}
+        detail={`This may take a minute while ${providerName} initializes`}
         onCancel={handleCancel}
       />
     );
@@ -227,7 +238,8 @@ export function DockerSetup({
     return (
       <Loading
         title={title}
-        message={`Installing ${providerName}...\nThis may take a few minutes.`}
+        message={`Installing ${providerName}`}
+        detail="This may take a few minutes."
         onCancel={handleCancel}
       />
     );
@@ -245,6 +257,8 @@ export function DockerSetup({
             padding: 1,
             flexDirection: 'column',
             flexGrow: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
           }}
         >
           <text style={{ fg: '#ff4444' }}>Error: {state.message}</text>

src/components/Loading.tsx

@@ -1,17 +1,20 @@
 import { useKeyboard } from '@opentui/react';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 export interface LoadingProps {
   title?: string;
   message?: string;
+  detail?: string;
   onCancel: () => void;
 }
 
 export function Loading({
   title = 'Loading',
   message = 'Please wait',
+  detail,
   onCancel,
 }: LoadingProps) {
+  const count = useRef(0);
   const [dots, setDots] = useState('');
 
   useKeyboard((key) => {
@@ -22,7 +25,8 @@ export function Loading({
 
   useEffect(() => {
     const interval = setInterval(() => {
-      setDots((d) => (d.length >= 3 ? '' : `${d}.`));
+      count.current += 1;
+      setDots('.'.repeat(count.current % 4).padEnd(3, ' '));
     }, 300);
     return () => clearInterval(interval);
   }, []);
@@ -37,13 +41,16 @@ export function Loading({
           padding: 1,
           flexDirection: 'column',
           flexGrow: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
         }}
       >
-        <text style={{ fg: '#888888' }}>
+        <text style={{ fg: '#eee' }}>
           {message}
           {dots}
         </text>
-        <text style={{ fg: '#555555', marginTop: 1 }}>Press Esc to cancel</text>
+        {detail && <text style={{ fg: '#888', marginTop: 1 }}>{detail}</text>}
+        <text style={{ fg: '#555', marginTop: 1 }}>Press Esc to cancel</text>
       </box>
     </box>
   );