@umituz/react-native-ai-generation-content 1.83.20 → 1.83.22

package/package.json

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

package/src/domains/creations/presentation/components/GalleryEmptyStates.tsx

@@ -27,29 +27,23 @@ function CreationCardSkeleton({ tokens }: { tokens: DesignTokens }) {
     const styles = createSkeletonStyles(tokens);
     return (
         <View style={styles.card}>
-            {/* Thumbnail skeleton */}
+            {/* Full-width image skeleton */}
             <AtomicSkeleton
                 pattern="custom"
-                custom={[{ width: 100, height: 100, borderRadius: 0 }]}
+                custom={[{ width: "100%" as unknown as number, height: 200, borderRadius: 0 }]}
             />
-            {/* Content skeleton */}
-            <View style={styles.content}>
-                <View style={styles.textArea}>
-                    <AtomicSkeleton
-                        pattern="custom"
-                        custom={[
-                            { width: 120, height: 18, borderRadius: 4, marginBottom: 8 },
-                            { width: 100, height: 14, borderRadius: 4 },
-                        ]}
-                    />
-                </View>
-                {/* Action buttons skeleton */}
+            {/* Bottom bar skeleton */}
+            <View style={styles.bottomBar}>
+                <AtomicSkeleton
+                    pattern="custom"
+                    custom={[{ width: 140, height: 16, borderRadius: 4 }]}
+                />
                 <View style={styles.actions}>
-                    {[1, 2, 3, 4].map((id) => (
+                    {[1, 2, 3].map((id) => (
                         <AtomicSkeleton
                             key={id}
                             pattern="custom"
-                            custom={[{ width: 36, height: 36, borderRadius: 18 }]}
+                            custom={[{ width: 32, height: 32, borderRadius: 16 }]}
                         />
                     ))}
                 </View>
@@ -131,19 +125,16 @@ const createStyles = (tokens: DesignTokens) => StyleSheet.create({
 
 const createSkeletonStyles = (tokens: DesignTokens) => StyleSheet.create({
     card: {
-        flexDirection: 'row',
         backgroundColor: tokens.colors.surface,
         borderRadius: tokens.spacing.md,
         overflow: 'hidden',
         marginBottom: tokens.spacing.md,
     },
-    content: {
-        flex: 1,
-        padding: tokens.spacing.md,
+    bottomBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
         justifyContent: 'space-between',
-    },
-    textArea: {
-        gap: tokens.spacing.xs,
+        padding: tokens.spacing.md,
     },
     actions: {
         flexDirection: 'row',

package/src/domains/creations/presentation/components/GalleryHeader.tsx

@@ -36,11 +36,13 @@ export const GalleryHeader: React.FC<GalleryHeaderProps> = ({
   return (
     <View style={[styles.headerArea, style]}>
       <View>
-        <View style={styles.titleRow}>
-          <AtomicText style={styles.title}>{title}</AtomicText>
-        </View>
+        {title ? (
+          <View style={styles.titleRow}>
+            <AtomicText style={styles.title}>{title}</AtomicText>
+          </View>
+        ) : null}
         <AtomicText style={styles.subtitle}>
-          {count} {countLabel}
+          {countLabel}
         </AtomicText>
       </View>
       {showFilter && filterButtons.length > 0 && (

package/src/domains/creations/presentation/components/GalleryScreenHeader.tsx

@@ -18,10 +18,15 @@ export const GalleryScreenHeader: React.FC<GalleryScreenHeaderProps> = ({ title,
 
   return (
     <View style={styles.screenHeader}>
-      <TouchableOpacity onPress={onBack} style={styles.backButton}>
+      <TouchableOpacity
+        onPress={onBack}
+        style={styles.backButton}
+        activeOpacity={0.6}
+        hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+      >
         <AtomicIcon
-          name="chevron-left"
-          customSize={28}
+          name="chevron-back"
+          customSize={24}
           customColor={tokens.colors.textPrimary}
         />
       </TouchableOpacity>
@@ -46,9 +51,12 @@ const createStyles = (tokens: DesignTokens) =>
       gap: tokens.spacing.md,
     },
     backButton: {
-      padding: tokens.spacing.xs,
+      width: 40,
+      height: 40,
+      justifyContent: "center",
+      alignItems: "center",
     },
     placeholder: {
-      width: 36,
+      width: 40,
     },
   });

package/src/domains/creations/presentation/hooks/useCreations.ts

@@ -70,7 +70,22 @@ export function useCreations({
 
     const unsubscribe = repository.subscribeToAll(userId, onDataCallback, onErrorCallback);
 
+    // Fallback timeout: if Firestore doesn't respond in 10s, stop loading
+    const timeoutId = setTimeout(() => {
+      setIsLoading((prev) => {
+        if (prev) {
+          if (typeof __DEV__ !== "undefined" && __DEV__) {
+            console.warn("[useCreations] Loading timeout - setting empty state");
+          }
+          setData((currentData) => currentData ?? []);
+          return false;
+        }
+        return prev;
+      });
+    }, 10000);
+
     return () => {
+      clearTimeout(timeoutId);
       if (typeof __DEV__ !== "undefined" && __DEV__) {
         console.log("[useCreations] Cleaning up realtime listener");
       }

package/src/domains/creations/presentation/screens/CreationsGalleryScreen.tsx

@@ -104,20 +104,23 @@ export function CreationsGalleryScreen({
     />
   ), [callbacks, getItemTitle]);
 
+  const hasScreenHeader = Boolean(onBack);
+
   const renderHeader = useMemo(() => {
     if (!creations?.length && !isLoading) return null;
+    if (isLoading) return null;
     return (
       <View style={[styles.header, { backgroundColor: tokens.colors.surface, borderBottomColor: tokens.colors.border }]}>
         <GalleryHeader
-          title={t(config.translations.title)}
+          title={hasScreenHeader ? "" : t(config.translations.title)}
           count={filters.filtered.length}
-          countLabel={t(config.translations.photoCount)}
+          countLabel={t(config.translations.photoCount, { count: filters.filtered.length })}
           showFilter={showFilter}
           filterButtons={filterButtons}
         />
       </View>
     );
-  }, [creations, isLoading, filters.filtered.length, showFilter, filterButtons, t, config, tokens]);
+  }, [creations, isLoading, filters.filtered.length, showFilter, filterButtons, t, config, tokens, hasScreenHeader]);
 
   const renderEmpty = useMemo(() => (
     <GalleryEmptyStates