feat: 第一个可以用的 ink 组件抽象 (#158)

packages/@ant/ink/src/theme/LoadingState.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { Box, Text } from '../index.js'
+import { Spinner } from './Spinner.js'
+
+type LoadingStateProps = {
+  /**
+   * The loading message to display next to the spinner.
+   */
+  message: string
+
+  /**
+   * Display the message in bold.
+   * @default false
+   */
+  bold?: boolean
+
+  /**
+   * Display the message in dimmed color.
+   * @default false
+   */
+  dimColor?: boolean
+
+  /**
+   * Optional subtitle displayed below the main message.
+   */
+  subtitle?: string
+}
+
+/**
+ * A spinner with loading message for async operations.
+ *
+ * @example
+ * // Basic loading
+ * <LoadingState message="Loading..." />
+ *
+ * @example
+ * // Bold loading message
+ * <LoadingState message="Loading sessions" bold />
+ *
+ * @example
+ * // With subtitle
+ * <LoadingState
+ *   message="Loading sessions"
+ *   bold
+ *   subtitle="Fetching your Claude Code sessions..."
+ * />
+ */
+export function LoadingState({
+  message,
+  bold = false,
+  dimColor = false,
+  subtitle,
+}: LoadingStateProps): React.ReactNode {
+  return (
+    <Box flexDirection="column">
+      <Box flexDirection="row">
+        <Spinner />
+        <Text bold={bold} dimColor={dimColor}>
+          {' '}
+          {message}
+        </Text>
+      </Box>
+      {subtitle && <Text dimColor>{subtitle}</Text>}
+    </Box>
+  )
+}