fix ux for loading wallet by delayig entire app rendering until its g…

…enerated
kibagateaux · Jul 30, 2024 · 2a596a6 · 2a596a6
1 parent e25f99a
commit 2a596a6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/app.config.js b/app.config.js
@@ -15,7 +15,7 @@ export default {
         userInterfaceStyle: 'light',
         splash: {
             image: './public/splash.png',
-            resizeMode: 'fill',
+            // resizeMode: 'fill', / doesnt work on ios apparently
             backgroundColor: '#ffc1cb',
         },
         assetBundlePatterns: ['**/*'],

diff --git a/src/app/index.tsx b/src/app/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { View, StyleSheet, Share } from 'react-native';
+import { View, StyleSheet, Share, Image } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 import { isEmpty } from 'lodash/fp';
 
@@ -36,6 +36,18 @@ const HomeScreen = () => {
     const [widgetConfig, setWidgetConfig] = useState<WidgetConfig[]>([]);
     const [onboardingStage, setOnboardingStage] = useState<string>();
 
+    const [appReady, setAppReady] = useState<boolean>(false);
+    console.log('loading app....', player, appReady);
+
+    useMemo(async () => {
+        if (!appReady && !player) {
+            console.log('loading wallet....', player);
+            await getSpellBook();
+            console.log('wallet loaded!');
+            setAppReady(true);
+        }
+    }, [appReady, player, getSpellBook]);
+
     useMemo(() => {
         if (isEmpty(widgetConfig) && homeConfig?.widgets) {
             console.log('page:home:setInitWidgi', homeConfig.widgets);
@@ -129,8 +141,13 @@ const HomeScreen = () => {
         // await getActivityData({ startTime, endTime });
     };
 
-    console.log('eggroll ', eggRollAngle.value);
+    if (!appReady) {
+        console.log('waiting for wallet....');
+        return <Image source={{ uri: '/public/splash.png' }} />;
+    }
+
     // console.log('home onboarding ', onboardingStage);
+    // TODO abstrzct into onboarding component systemization
     if (onboardingStage === STAGE_AVATAR_CONFIG)
         return (
             <OnboardingWizard
@@ -180,6 +197,7 @@ const HomeScreen = () => {
                 }}
             />
         );
+
     return (
         <View style={{ flex: 1 }}>
             <View style={styles.container}>