@umituz/react-native-ai-creations 1.3.13 → 1.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-creations",
-  "version": "1.3.13",
+  "version": "1.4.1",
   "description": "AI-generated creations gallery with filtering, sharing, and management for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/screens/CreationsGalleryScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useCallback, useState } from "react";
-import { View, StyleSheet } from "react-native";
+import { View, StyleSheet, ActivityIndicator } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { useSharing } from "@umituz/react-native-sharing";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -83,6 +83,11 @@ export function CreationsGalleryScreen({
     });
   }, [alert, config, deleteMutation, t]);
 
+  // Handle viewing a creation - shows detail screen
+  const handleView = useCallback((creation: Creation) => {
+    setSelectedCreation(creation);
+  }, []);
+
   if (selectedCreation) {
     return (
       <CreationDetailScreen
@@ -97,8 +102,32 @@ export function CreationsGalleryScreen({
 
   const styles = useStyles(tokens);
 
-  const showEmptyState = !isLoading && (!creations || creations.length === 0);
+  // 1. Loading State - Prevent header flash
+  if (isLoading && (!creations || creations.length === 0)) {
+    return (
+      <View style={[styles.container, styles.center]}>
+        <ActivityIndicator size="large" color={tokens.colors.primary} />
+      </View>
+    );
+  }
+
+  // 2. Pure Empty State - If no creations exist at all, don't show filters
+  if (!creations || creations.length === 0) {
+    return (
+      <View style={styles.container}>
+        <View style={[styles.container, { paddingTop: insets.top + tokens.spacing.md }]}>
+          <EmptyState
+            title={t(config.translations.empty)}
+            description={t(config.translations.emptyDescription)}
+            actionLabel={emptyActionLabel}
+            onAction={onEmptyAction}
+          />
+        </View>
+      </View>
+    );
+  }
 
+  // 3. Gallery Content
   return (
     <View style={styles.container}>
       <GalleryHeader
@@ -111,12 +140,12 @@ export function CreationsGalleryScreen({
         style={{ paddingTop: insets.top + tokens.spacing.md }}
       />
 
-      {showEmptyState ? (
+      {filtered.length === 0 ? (
         <EmptyState
-          title={t(config.translations.empty)}
-          description={t(config.translations.emptyDescription)}
-          actionLabel={emptyActionLabel}
-          onAction={onEmptyAction}
+          title={t("common.no_results") || "No results"}
+          description={t("common.no_results_description") || "Try changing your filters"}
+          actionLabel={t("common.clear_all") || "Clear All"}
+          onAction={clearFilters}
         />
       ) : (
         <>
@@ -125,7 +154,7 @@ export function CreationsGalleryScreen({
             types={translatedTypes}
             isLoading={isLoading}
             onRefresh={refetch}
-            onView={setSelectedCreation}
+            onView={handleView}
             onShare={handleShare}
             onDelete={handleDelete}
             contentContainerStyle={{ paddingBottom: insets.bottom + tokens.spacing.xl }}
@@ -138,24 +167,23 @@ export function CreationsGalleryScreen({
             onIndexChange={setViewerIndex}
             enableEditing={enableEditing}
             onImageEdit={onImageEdit}
-            selectedCreationId={selectedCreation?.id}
-          />
-          <FilterBottomSheet
-            ref={filterSheetRef}
-            categories={allCategories}
-            selectedIds={selectedIds}
-            onFilterPress={(id, catId) => toggleFilter(id, allCategories.find(c => c.id === catId)?.multiSelect)}
-            onClearFilters={clearFilters}
-            title={t(config.translations.filterTitle) || t("common.filter")}
           />
         </>
       )}
+
+      <FilterBottomSheet
+        ref={filterSheetRef}
+        categories={allCategories}
+        selectedIds={selectedIds}
+        onFilterPress={(id, catId) => toggleFilter(id, allCategories.find(c => c.id === catId)?.multiSelect)}
+        onClearFilters={clearFilters}
+        title={t(config.translations.filterTitle) || t("common.filter")}
+      />
     </View>
   );
 }
 
-
-
 const useStyles = (tokens: any) => StyleSheet.create({
   container: { flex: 1, backgroundColor: tokens.colors.background },
+  center: { justifyContent: 'center', alignItems: 'center' },
 });