only load palettes after init connection to purchase library is done

ApplicationRoot.js

@@ -28,6 +28,7 @@ import AppAuthProvider from './components/AppAuthProvider.js';
 import UserProfile from './screens/UserProfileScreen.js';
 import useApplicationStore from './hooks/useApplicationStore.js';
 import ExplorePaletteScreen from './screens/ExplorePaletteScreen.js';
+import { notifyMessage } from './libs/Helpers.js';
 
 const Stack = createNativeStackNavigator();
 
@@ -38,11 +39,13 @@ export default function App() {
   const { loadInitPaletteFromStore } = applicationState;
   const [isMenuOpen, setMenu] = useState(false);
   const navigationRef = useNavigationContainerRef();
-  useIAPConnection();
-
-  useEffect(() => {
-    loadInitPaletteFromStore();
-  }, [loadInitPaletteFromStore]);
+  useIAPConnection(function(error) {
+    if (error) {
+      // TODO: figure out a better way to handle this error and show user a way to retry, ask for help or continue.
+      notifyMessage("Error during purchase initialization. Purchase might not work. Please retry");
+    } 
+    loadInitPaletteFromStore(); // Still load the palettes. Specially simulator will always face this issue.
+  });
 
   const hamburgerMenuIcon = () => (
     <TouchableOpacity onPress={() => setMenu(!isMenuOpen)}>

hooks/useIAPConnection.ts

@@ -14,12 +14,15 @@ import {
 import { notifyMessage, logEvent, sendClientError } from  '../libs/Helpers';
 // https://react-native-iap.dooboolab.com/docs/guides/purchases
 // TODO: We need to implement this properly with server side validation.
-const useIAPConnection = () => {
+const useIAPConnection = (callback) => {
   useEffect(() => {
     let purchaseUpdateSubscription = null;
     let purchaseErrorSubscription = null;
 
     initConnection().then(() => {
+      if (callback) {
+        callback();
+      }
       flushFailedPurchasesCachedAsPendingAndroid()
         .catch((error) => {
           sendClientError('purchase_event_error_flush', error.message);
@@ -66,6 +69,9 @@ const useIAPConnection = () => {
             },
           );
         });
+    }).catch((error) => {
+      callback(error);
+      sendClientError('init_connection_error', error.message);
     });
 
     return () => {