@umituz/react-native-ai-generation-content 1.28.7 → 1.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.28.7",
+  "version": "1.29.0",
   "description": "Provider-agnostic AI generation orchestration for React Native with result preview components",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/domains/generation/wizard/presentation/components/IndeterminateProgressBar.tsx

@@ -0,0 +1,69 @@
+/**
+ * Indeterminate Progress Bar Component
+ * Pulses left to right to indicate ongoing progress without specific percentage
+ * Uses setInterval + state updates (not Animated API) for compatibility
+ */
+
+import React, { useState, useEffect, useRef } from "react";
+import { View, StyleSheet } from "react-native";
+
+export interface IndeterminateProgressBarProps {
+  readonly backgroundColor: string;
+  readonly fillColor: string;
+}
+
+export const IndeterminateProgressBar: React.FC<IndeterminateProgressBarProps> = ({
+  backgroundColor,
+  fillColor,
+}) => {
+  const [position, setPosition] = useState(0);
+  const directionRef = useRef(1);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setPosition((prev) => {
+        const next = prev + directionRef.current * 2;
+        if (next >= 70) {
+          directionRef.current = -1;
+          return 70;
+        }
+        if (next <= 0) {
+          directionRef.current = 1;
+          return 0;
+        }
+        return next;
+      });
+    }, 30);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <View style={[styles.progressBar, { backgroundColor }]}>
+      <View
+        style={[
+          styles.progressFill,
+          {
+            backgroundColor: fillColor,
+            left: `${position}%`,
+          },
+        ]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  progressBar: {
+    height: 8,
+    borderRadius: 4,
+    overflow: "hidden",
+    position: "relative",
+  },
+  progressFill: {
+    height: "100%",
+    borderRadius: 4,
+    position: "absolute",
+    width: "30%",
+  },
+});

package/src/domains/generation/wizard/presentation/hooks/useGenerationPhase.ts

@@ -0,0 +1,47 @@
+/**
+ * useGenerationPhase Hook
+ * Derives generation phase from elapsed time for UX feedback
+ *
+ * Best Practice: Since actual API progress is unknown (FAL only returns IN_QUEUE/IN_PROGRESS),
+ * we use time-based phases to provide meaningful feedback to users.
+ */
+
+import { useState, useEffect, useRef } from "react";
+
+export type GenerationPhase = "queued" | "processing" | "finalizing";
+
+interface UseGenerationPhaseOptions {
+  /** Time in ms before transitioning from "queued" to "processing" (default: 5000) */
+  readonly queuedDuration?: number;
+}
+
+/**
+ * Hook to derive generation phase from elapsed time
+ * - 0-5s: "queued" (Waiting in queue...)
+ * - 5s+: "processing" (Generating your content...)
+ *
+ * Note: "finalizing" phase is not time-based, it should be set when
+ * the API reports completion (not implemented here as it requires status callback)
+ */
+export function useGenerationPhase(options?: UseGenerationPhaseOptions): GenerationPhase {
+  const { queuedDuration = 5000 } = options ?? {};
+
+  const [phase, setPhase] = useState<GenerationPhase>("queued");
+  const startTimeRef = useRef(Date.now());
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const elapsed = Date.now() - startTimeRef.current;
+
+      if (elapsed < queuedDuration) {
+        setPhase("queued");
+      } else {
+        setPhase("processing");
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [queuedDuration]);
+
+  return phase;
+}

package/src/domains/generation/wizard/presentation/screens/GeneratingScreen.tsx

@@ -1,12 +1,14 @@
 /**
  * Generic Generating Screen
- * Shows progress while AI generates content
- * Uses scenario-specific messages with fallback to generic messages
+ * Shows indeterminate progress while AI generates content
+ * Uses status messages instead of fake percentages (UX best practice)
  */
 
 import React, { useMemo } from "react";
 import { View, StyleSheet, ActivityIndicator } from "react-native";
 import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import { useGenerationPhase } from "../hooks/useGenerationPhase";
+import { IndeterminateProgressBar } from "../components/IndeterminateProgressBar";
 
 export interface GeneratingScreenProps {
   readonly progress: number;
@@ -25,16 +27,17 @@ export interface GeneratingScreenProps {
 }
 
 export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
-  progress,
+  progress: _progress,
   scenario,
   t,
   onCancel: _onCancel,
 }) => {
   const tokens = useAppDesignTokens();
+  const phase = useGenerationPhase();
 
   if (typeof __DEV__ !== "undefined" && __DEV__) {
     console.log("[GeneratingScreen] Rendering", {
-      progress,
+      phase,
       scenarioId: scenario?.id,
     });
   }
@@ -48,6 +51,19 @@ export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
     };
   }, [scenario, t]);
 
+  const statusMessage = useMemo(() => {
+    switch (phase) {
+      case "queued":
+        return t("generator.status.queued") || "Waiting in queue...";
+      case "processing":
+        return t("generator.status.processing") || "Generating your content...";
+      case "finalizing":
+        return t("generator.status.finalizing") || "Almost done...";
+      default:
+        return messages.waitMessage;
+    }
+  }, [phase, t, messages.waitMessage]);
+
   return (
     <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
       <View style={styles.content}>
@@ -58,35 +74,22 @@ export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
         </AtomicText>
 
         <AtomicText type="bodyMedium" style={[styles.message, { color: tokens.colors.textSecondary }]}>
-          {messages.waitMessage}
+          {statusMessage}
         </AtomicText>
 
-        {/* Progress Bar */}
         <View style={styles.progressContainer}>
-          <View style={[styles.progressBar, { backgroundColor: tokens.colors.surfaceVariant }]}>
-            <View
-              style={[
-                styles.progressFill,
-                {
-                  backgroundColor: tokens.colors.primary,
-                  width: `${Math.min(100, Math.max(0, progress))}%`,
-                },
-              ]}
-            />
-          </View>
-          <AtomicText type="bodySmall" style={[styles.progressText, { color: tokens.colors.textSecondary }]}>
-            {Math.round(progress)}%
-          </AtomicText>
+          <IndeterminateProgressBar
+            backgroundColor={tokens.colors.surfaceVariant}
+            fillColor={tokens.colors.primary}
+          />
         </View>
 
-        {/* Scenario Info */}
         {scenario && (
           <AtomicText type="bodySmall" style={[styles.hint, { color: tokens.colors.textSecondary }]}>
             {scenario.title || scenario.id}
           </AtomicText>
         )}
 
-        {/* Hint */}
         <AtomicText type="bodySmall" style={[styles.hint, { color: tokens.colors.textSecondary }]}>
           {messages.hint}
         </AtomicText>
@@ -117,19 +120,6 @@ const styles = StyleSheet.create({
   progressContainer: {
     width: "100%",
     marginTop: 24,
-    gap: 8,
-  },
-  progressBar: {
-    height: 8,
-    borderRadius: 4,
-    overflow: "hidden",
-  },
-  progressFill: {
-    height: "100%",
-    borderRadius: 4,
-  },
-  progressText: {
-    textAlign: "center",
   },
   hint: {
     textAlign: "center",