@umituz/react-native-subscription 2.14.51 → 2.14.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.14.51",
+  "version": "2.14.53",
   "description": "Complete subscription management with RevenueCat, paywall UI, and credits system for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/domains/paywall/components/PaywallModal.tsx

@@ -4,8 +4,8 @@
  */
 
 import React, { useState, useCallback } from "react";
-import { View, ScrollView, TouchableOpacity, ActivityIndicator, Linking, type ImageSourcePropType } from "react-native";
-import { BaseModal, useAppDesignTokens, AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
+import { View, ScrollView, TouchableOpacity, Linking, type ImageSourcePropType } from "react-native";
+import { BaseModal, useAppDesignTokens, AtomicText, AtomicIcon, AtomicSpinner } from "@umituz/react-native-design-system";
 import { Image } from "expo-image";
 import type { PurchasesPackage } from "react-native-purchases";
 import { PlanCard } from "./PlanCard";
@@ -149,10 +149,11 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
 
                     {isLoading ? (
                         <View style={styles.loading}>
-                            <ActivityIndicator color={tokens.colors.primary} />
-                            <AtomicText type="bodyMedium" style={[styles.loadingText, { color: tokens.colors.textSecondary }]}>
-                                {translations.loadingText}
-                            </AtomicText>
+                            <AtomicSpinner
+                                size="lg"
+                                color="primary"
+                                text={translations.loadingText}
+                            />
                         </View>
                     ) : (
                         <View style={styles.plans}>

package/src/domains/wallet/presentation/components/TransactionList.tsx

@@ -6,11 +6,12 @@
  */
 
 import React from "react";
-import { View, StyleSheet, ScrollView, ActivityIndicator } from "react-native";
+import { View, StyleSheet, ScrollView } from "react-native";
 import {
     useAppDesignTokens,
     AtomicText,
     AtomicIcon,
+    AtomicSpinner,
 } from "@umituz/react-native-design-system";
 import type { CreditLog } from "../../domain/types/transaction.types";
 import {
@@ -50,22 +51,19 @@ export const TransactionList: React.FC<TransactionListProps> = ({
         >
           {translations.title}
         </AtomicText>
-        <AtomicIcon name="history" size="md" color="secondary" />
+        <AtomicIcon name="time-outline" size="md" color="secondary" />
       </View>
 
       {loading ? (
-        <View style={styles.stateContainer}>
-          <ActivityIndicator size="large" color={tokens.colors.primary} />
-          <AtomicText
-            type="bodyMedium"
-            style={[styles.stateText, { color: tokens.colors.textSecondary }]}
-          >
-            {translations.loading}
-          </AtomicText>
-        </View>
+        <AtomicSpinner
+          size="lg"
+          color="primary"
+          text={translations.loading}
+          style={styles.stateContainer}
+        />
       ) : transactions.length === 0 ? (
         <View style={styles.stateContainer}>
-          <AtomicIcon name="inbox" size="xl" color="secondary" />
+          <AtomicIcon name="file-tray-outline" size="xl" color="secondary" />
           <AtomicText
             type="bodyMedium"
             style={[styles.stateText, { color: tokens.colors.textSecondary }]}

package/src/domains/wallet/presentation/screens/WalletScreen.tsx

@@ -7,12 +7,13 @@
  */
 
 import React from "react";
-import { View, StyleSheet, ActivityIndicator, TouchableOpacity } from "react-native";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
 import {
     useSafeAreaInsets,
     useAppDesignTokens,
     AtomicText,
     AtomicIcon,
+    AtomicSpinner,
     ScreenLayout,
 } from "@umituz/react-native-design-system";
 import {
@@ -79,15 +80,13 @@ export const WalletScreen: React.FC<WalletScreenProps> = ({ config }) => {
   const renderBalance = () => {
     if (config.balanceLoading) {
       return (
-        <View style={styles.loadingContainer}>
-          <ActivityIndicator size="large" color={tokens.colors.primary} />
-          <AtomicText
-            type="bodyMedium"
-            style={[styles.loadingText, { color: tokens.colors.textSecondary }]}
-          >
-            {config.translations.loading}
-          </AtomicText>
-        </View>
+        <AtomicSpinner
+          size="xl"
+          color="primary"
+          text={config.translations.loading}
+          fullContainer
+          style={styles.loadingContainer}
+        />
       );
     }
 
@@ -135,13 +134,6 @@ const styles = StyleSheet.create({
     marginRight: 16,
   },
   loadingContainer: {
-    padding: 40,
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 12,
-  },
-  loadingText: {
-    fontSize: 14,
-    fontWeight: "500",
+    minHeight: 200,
   },
 });