profile lazy loading

src/components/MySuspenseFallback.tsx

@@ -0,0 +1,13 @@
+import {Suspense} from 'react';
+import {Text} from 'react-native';
+
+export function MySuspenseFallback({children}: {children: React.ReactNode}) {
+  console.log('MySuspenseFallback');
+
+  return (
+    <Suspense
+      fallback={<Text style={{color: 'red', fontSize: 64}}>loading...</Text>}>
+      {children}
+    </Suspense>
+  );
+}

src/event/types.ts

@@ -46,6 +46,9 @@ export interface PAEvent {
   UserLength: BasicEventProp<number>;
   EventBannerPicture: EventBannerPicture;
   ButtonAction: BasicEventProp<string>;
+  //isJoined
+  //minAge
+  //AddressText
 }
 
 export function NumToEventType(num: number): EventType {

src/navigation/tabs/main/ProfileTab.tsx

@@ -6,21 +6,76 @@ import {useSelector} from 'react-redux';
 import {RootState} from '@redux/store';
 import {MyIconButton} from '@components/MyButton';
 import {useNavigation} from '@react-navigation/native';
-import {
+import {ProfileOverview} from '@pages/profile/profile';
-  ProfileOverview,
+import {lazy} from 'react';
-  UpdatePassword,
+import {MySuspenseFallback} from '@components/MySuspenseFallback';
-  UpdateUsername,
-} from '@pages/profile/profile';
-import {Help} from '@pages/profile/help';
-import {About} from '@pages/profile/about';
-import {lazy, Suspense} from 'react';
 
-const ProfileSettings = lazy(() =>
+const LazyProfileSettings = lazy(() =>
   import('@pages/profile/profile').then(module => ({
     default: module.ProfileSettings,
   })),
 );
 
+const LazyUpdateUsername = lazy(() =>
+  import('@pages/profile/profile').then(module => ({
+    default: module.UpdateUsername,
+  })),
+);
+
+const LazyUpdatePassword = lazy(() =>
+  import('@pages/profile/profile').then(module => ({
+    default: module.UpdatePassword,
+  })),
+);
+
+const LazyHelp = lazy(() =>
+  import('@pages/profile/help').then(module => ({default: module.Help})),
+);
+
+const Help = () => {
+  return (
+    <MySuspenseFallback>
+      <LazyHelp />
+    </MySuspenseFallback>
+  );
+};
+
+const LazyAbout = lazy(() =>
+  import('@pages/profile/about').then(module => ({default: module.About})),
+);
+
+const About = () => {
+  return (
+    <MySuspenseFallback>
+      <LazyAbout />
+    </MySuspenseFallback>
+  );
+};
+
+const ProfileSettings = () => {
+  return (
+    <MySuspenseFallback>
+      <LazyProfileSettings />
+    </MySuspenseFallback>
+  );
+};
+
+const UpdateUsername = () => {
+  return (
+    <MySuspenseFallback>
+      <LazyUpdateUsername />
+    </MySuspenseFallback>
+  );
+};
+
+const UpdatePassword = () => {
+  return (
+    <MySuspenseFallback>
+      <LazyUpdatePassword />
+    </MySuspenseFallback>
+  );
+};
+
 export const ProfileTabName = 'Profile';
 
 export type ProfileStackNavigatorParamList = {

src/pages/event/EventPage.tsx

@@ -29,6 +29,23 @@ function EventPage({route}: {route: {params: {eventID: EventID}}}) {
     image = event.EventBannerPicture.lq;
   }
 
+  const imageUrl =
+    'https://res.cloudinary.com/coin-nft/image/upload/c_limit,q_auto,w_329/f_auto/v1/cache/1/f2/65/f26573682335fe72b50f0f74041736905308345d6043abbac832856b3a4d2246-ZGMwNDMxZTktYTY4NS00OTQ1LWJiYmUtMDRhY2Q0YzUzMjAy?_a=ATCkFAA0';
+
+  useEffect(() => {
+    // Fetch the image dimensions and calculate the aspect ratio
+    Image.getSize(
+      imageUrl,
+      (width, height) => {
+        const calculatedAspectRatio = width / height;
+        setAspectRatio(calculatedAspectRatio);
+      },
+      error => {
+        console.error('Error getting image size: ', error);
+      },
+    );
+  }, [imageUrl]);
+
   return (
     <MyScreenContainer scrollView={true}>
       {
@@ -36,7 +53,7 @@ function EventPage({route}: {route: {params: {eventID: EventID}}}) {
           <Text>{event.Name.data}</Text>
           <Image
             source={{
-              uri: 'https://res.cloudinary.com/coin-nft/image/upload/c_limit,q_auto,w_329/f_auto/v1/cache/1/f2/65/f26573682335fe72b50f0f74041736905308345d6043abbac832856b3a4d2246-ZGMwNDMxZTktYTY4NS00OTQ1LWJiYmUtMDRhY2Q0YzUzMjAy?_a=ATCkFAA0',
+              uri: imageUrl,
             }}
             style={{width: '100%', height: 400}}
             alt="Event banner"

src/pages/profile/profile.tsx

@@ -1,5 +1,5 @@
 import {MyScreenContainer} from '@components/MyScreenContainer';
-import {Image, ScrollView} from 'react-native';
+import {Image} from 'react-native';
 import {View} from 'react-native';
 import Avatar from '@assets/profile.png';
 import {MyTitle} from '@components/MyTitle';
@@ -8,7 +8,7 @@ import {MyIcon} from '@components/MyIcon';
 import {useNavigation} from '@react-navigation/native';
 import {ProfileScreenNavigationProp} from '@navigation/tabs/main/ProfileTab';
 import {MyIconInput} from '@components/MyInput';
-import {useEffect, useLayoutEffect, useState} from 'react';
+import {useEffect, useState} from 'react';
 import {RootScreenNavigationProp} from '@navigation/navigation';
 import {useSelector} from 'react-redux';
 import {RootState} from '@redux/store';
@@ -182,6 +182,10 @@ export function ProfileSettings() {
 
             MyUserManager.logoutMyUser();
             rootNavigation.navigate('Registration', {screen: 'LoginPreview'});
+            rootNavigation.reset({
+              index: 0,
+              routes: [{name: 'Registration'}],
+            });
           }}
         />
       </SettingsItemContainer>