Handle app loading more seamlessly (#398)

Previously, the app somehow blinks when the app starts the first time in the dark mode because of the different background colors. Handle these more seamlessly for a better user experience. Add [CustomAppLoading] for future changes. Changing the loading screen in the current UI component will affect all other loading screens. * Expo now supports `useAssets` to load assets with simpler code. Refactored it. * Handle background color on `react-navigations`. * Add `useTimeout` hook which is not needed currently but for a utility hook.
hyochan · May 25, 2021 · e56166e · e56166e
1 parent 623ddae
commit e56166e
Show file tree

Hide file tree

Showing 14 changed files with 154 additions and 81 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -1,32 +1,26 @@
 import * as Notifications from 'expo-notifications';
 import * as SplashScreen from 'expo-splash-screen';
 
-import {Alert, Image} from 'react-native';
 import {AppearanceProvider, useColorScheme} from 'react-native-appearance';
-import {LoadingIndicator, ThemeProvider, ThemeType} from 'dooboo-ui';
-import React, {
-  FC,
-  ReactElement,
-  ReactNode,
-  Suspense,
-  useEffect,
-  useState,
-} from 'react';
+import React, {FC, ReactElement, ReactNode, Suspense, useEffect} from 'react';
+import {ThemeProvider, ThemeType} from 'dooboo-ui';
 import {dark, light} from './theme';
 
 import {ActionSheetProvider} from '@expo/react-native-action-sheet';
+import {Alert} from 'react-native';
 import AppLoading from 'expo-app-loading';
-import {Asset} from 'expo-asset';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {AuthProvider} from './providers/AuthProvider';
 import ComponentWrapper from './utils/ComponentWrapper';
+import CustomLoadingIndicator from './components/uis/CustomLoadingIndicator';
 import {DeviceProvider} from './providers/DeviceProvider';
 import Icons from './utils/Icons';
 import {ResettableRelayProvider} from './providers/ResettableProvider';
 import RootNavigator from './components/navigations/RootStackNavigator';
 import {createRelayEnvironment} from './relay';
 import {getString} from '../STRINGS';
 import {registerForPushNotificationsAsync} from './utils/noti';
+import {useAssets} from 'expo-asset';
 
 Notifications.setNotificationHandler({
   handleNotification: async () => ({
@@ -36,27 +30,12 @@ Notifications.setNotificationHandler({
   }),
 });
 
-function cacheImages(images: (number | string)[]): any[] {
-  return images.map((image) => {
-    if (typeof image === 'string') return Image.prefetch(image);
-    else return Asset.fromModule(image as number).downloadAsync();
-  });
-}
-
-const prepareAutoHide = async (): Promise<void> => {
+const preventAutoHide = async (): Promise<void> => {
   await SplashScreen.preventAutoHideAsync();
 };
 
-function App(): ReactElement {
-  const [assetLoaded, setAssetLoaded] = useState<boolean>(false);
-
-  const loadAssetsAsync = async (): Promise<void> => {
-    const imageAssets = cacheImages(Icons);
-
-    await Promise.all([...imageAssets]);
-
-    setAssetLoaded(true);
-  };
+const HackatalkThemeProvider: FC<{children: ReactElement}> = ({children}) => {
+  const colorScheme = useColorScheme();
 
   const hideSplashScreenThenRegisterNotification = async (): Promise<void> => {
     try {
@@ -86,26 +65,16 @@ function App(): ReactElement {
       });
   };
 
+  const [assets] = useAssets(Icons);
+
   useEffect(() => {
-    if (!assetLoaded) {
-      SplashScreen.preventAutoHideAsync();
-      loadAssetsAsync();
-    } else hideSplashScreenThenRegisterNotification();
-  }, [assetLoaded]);
+    if (!assets) preventAutoHide();
+    else hideSplashScreenThenRegisterNotification();
+  }, [assets]);
 
-  if (!assetLoaded)
+  if (!assets)
     return <AppLoading autoHideSplash={false} onError={console.warn} />;
 
-  return <RootNavigator />;
-}
-
-const HackatalkThemeProvider: FC<{children: ReactElement}> = ({children}) => {
-  const colorScheme = useColorScheme();
-
-  useEffect(() => {
-    prepareAutoHide();
-  }, []);
-
   return (
     <ThemeProvider
       customTheme={{
@@ -131,10 +100,10 @@ function ActionSheetProviderWithChildren(props: {
 }
 
 // Add all required providers for App.
-const WrappedApp = new ComponentWrapper(App)
+const WrappedApp = new ComponentWrapper(RootNavigator)
   .wrap(ActionSheetProviderWithChildren, {})
   .wrap(AuthProvider, {})
-  .wrap(Suspense, {fallback: <LoadingIndicator />})
+  .wrap(Suspense, {fallback: <CustomLoadingIndicator />})
   .wrap(ResettableRelayProvider, {createRelayEnvironment})
   .wrap(DeviceProvider, {})
   .wrap(HackatalkThemeProvider, {})

diff --git a/client/src/components/navigations/AuthStackNavigator.tsx b/client/src/components/navigations/AuthStackNavigator.tsx
@@ -49,6 +49,9 @@ function AuthNavigator(): ReactElement {
           borderBottomWidth: 0,
           elevation: 0,
         },
+        cardStyle: {
+          backgroundColor: theme.background,
+        },
         headerTintColor: theme.text,
       }}>
       <Stack.Screen

diff --git a/client/src/components/navigations/MainStackNavigator/index.tsx b/client/src/components/navigations/MainStackNavigator/index.tsx
@@ -1,6 +1,5 @@
 import * as Notifications from 'expo-notifications';
 
-import {Channel, User} from '../../../types/graphql';
 import {CompositeNavigationProp, useNavigation} from '@react-navigation/native';
 import {Image, Platform, TouchableOpacity, View} from 'react-native';
 import React, {ReactElement, useEffect, useMemo} from 'react';
@@ -155,6 +154,9 @@ function MainStackNavigator(): ReactElement {
       initialRouteName="MainTab"
       screenOptions={{
         headerBackTitle: '',
+        cardStyle: {
+          backgroundColor: theme.background,
+        },
       }}>
       <Stack.Screen
         name="MainTab"
@@ -227,12 +229,15 @@ function MainStackNavigator(): ReactElement {
   );
 }
 
-function RootNavigator(): ReactElement {
+function MainNavigator(): ReactElement {
+  const {theme} = useTheme();
+
   return (
     <View
       style={{
         flex: 1,
         flexDirection: 'column',
+        backgroundColor: theme.background,
       }}>
       <StatusBar />
       <MainStackNavigator />
@@ -241,10 +246,10 @@ function RootNavigator(): ReactElement {
   );
 }
 
-export default function RootNavigatorWrapper(): ReactElement {
+export default function MainNavigatorWrapper(): ReactElement {
   return (
     <ProfileModalProvider>
-      <RootNavigator />
+      <MainNavigator />
     </ProfileModalProvider>
   );
 }
diff --git a/client/src/components/navigations/RootStackNavigator.tsx b/client/src/components/navigations/RootStackNavigator.tsx
@@ -1,7 +1,6 @@
 import * as SplashScreen from 'expo-splash-screen';
 
 import AuthStack, {AuthStackParamList} from './AuthStackNavigator';
-import {LoadingIndicator, useTheme} from 'dooboo-ui';
 import MainStack, {MainStackParamList} from './MainStackNavigator';
 import {
   NavigationContainer,
@@ -17,10 +16,12 @@ import {
 import {meQuery, useAuthContext} from '../../providers/AuthProvider';
 
 import {AuthProviderMeQuery} from '../../__generated__/AuthProviderMeQuery.graphql';
+import CustomLoadingIndicator from '../uis/CustomLoadingIndicator';
 import ImageSlider from '../pages/ImageSlider';
 import NotFound from '../pages/NotFound';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import WebView from '../pages/WebView';
+import {useTheme} from 'dooboo-ui';
 
 export type RootStackParamList = {
   default: undefined;
@@ -183,26 +184,28 @@ function AuthNavigatorOnly(): React.ReactElement {
 }
 
 const RootNavigatorWrapper: FC = () => {
-  const {theme} = useTheme();
   const {user, loadMeQuery, meQueryReference} = useAuthContext();
+  const {theme} = useTheme();
 
   useEffect(() => {
     if (!user) loadMeQuery({});
   }, [loadMeQuery, user]);
 
   return (
-    <Suspense
-      fallback={
-        <View style={{flex: 1, backgroundColor: theme.background}}>
-          <LoadingIndicator />
-        </View>
-      }>
-      {meQueryReference ? (
-        <RootNavigator queryReference={meQueryReference} />
-      ) : (
-        <AuthNavigatorOnly />
-      )}
-    </Suspense>
+    <View
+      style={{
+        flex: 1,
+        alignSelf: 'stretch',
+        backgroundColor: theme.background,
+      }}>
+      <Suspense fallback={<CustomLoadingIndicator />}>
+        {meQueryReference ? (
+          <RootNavigator queryReference={meQueryReference} />
+        ) : (
+          <AuthNavigatorOnly />
+        )}
+      </Suspense>
+    </View>
   );
 };
 

diff --git a/client/src/components/pages/BlockedUser.tsx b/client/src/components/pages/BlockedUser.tsx
@@ -1,8 +1,8 @@
 import {FlatList, ListRenderItem, View} from 'react-native';
 import React, {FC, Suspense, useMemo} from 'react';
 
+import CustomLoadingIndicator from '../uis/CustomLoadingIndicator';
 import EmptyListItem from '../uis/EmptyListItem';
-import {LoadingIndicator} from 'dooboo-ui';
 import type {UserBlockedUsersQuery} from '../../__generated__/UserBlockedUsersQuery.graphql';
 import UserListItem from '../uis/UserListItem';
 import {blockedUsersQuery} from '../../relay/queries/User';
@@ -75,7 +75,7 @@ const ContentContainer: FC = () => {
 const Page: FC = () => {
   return (
     <Container>
-      <Suspense fallback={<LoadingIndicator />}>
+      <Suspense fallback={<CustomLoadingIndicator />}>
         <ContentContainer />
       </Suspense>
     </Container>

diff --git a/client/src/components/pages/ChannelCreate.tsx b/client/src/components/pages/ChannelCreate.tsx
@@ -17,7 +17,6 @@ import {
   ChannelFindOrCreatePrivateChannelMutationResponse,
 } from '../../__generated__/ChannelFindOrCreatePrivateChannelMutation.graphql';
 import {IC_CIRCLE_X, IC_NO_IMAGE} from '../../utils/Icons';
-import {LoadingIndicator, useTheme} from 'dooboo-ui';
 import React, {FC, ReactElement, Suspense, useMemo, useState} from 'react';
 import {
   graphql,
@@ -27,6 +26,7 @@ import {
 } from 'react-relay';
 
 import {ChannelCreate_friends$key} from '../../__generated__/ChannelCreate_friends.graphql';
+import CustomLoadingIndicator from '../uis/CustomLoadingIndicator';
 import ErroView from '../uis/ErrorView';
 import {FriendsQuery} from '../../__generated__/FriendsQuery.graphql';
 import {MainStackNavigationProps} from '../navigations/MainStackNavigator';
@@ -40,6 +40,7 @@ import {showAlertForError} from '../../utils/common';
 import styled from '@emotion/native';
 import useDebounce from '../../hooks/useDebounce';
 import {useNavigation} from '@react-navigation/native';
+import {useTheme} from 'dooboo-ui';
 
 const ITEM_CNT = 20;
 
@@ -369,15 +370,15 @@ const ChannelCreate: FC = () => {
         }}
         value={searchText}
       />
-      <Suspense fallback={<LoadingIndicator />}>
+      <Suspense fallback={<CustomLoadingIndicator />}>
         <ContentContainer
           scrollY={scrollY}
           searchArgs={searchArgs}
           selectedUsers={selectedUsers}
           setSelectedUsers={setSelectedUsers}
         />
       </Suspense>
-      {isChannelInFlight ? <LoadingIndicator /> : null}
+      {isChannelInFlight ? <CustomLoadingIndicator /> : null}
     </Container>
   );
 };

diff --git a/client/src/components/pages/MainChannel.tsx b/client/src/components/pages/MainChannel.tsx
@@ -1,17 +1,17 @@
-import {Channel, User} from '../../types/graphql';
 import type {
   ChannelsQuery,
   ChannelsQueryResponse,
   ChannelsQueryVariables,
 } from '../../__generated__/ChannelsQuery.graphql';
 import {FlatList, Platform, TouchableOpacity, View} from 'react-native';
-import {LoadingIndicator, useTheme} from 'dooboo-ui';
 import React, {FC, Suspense, useMemo, useState} from 'react';
 import {graphql, useLazyLoadQuery, usePaginationFragment} from 'react-relay';
 import useOrientation, {Orientation} from '../../hooks/useOrientation';
 
 import {AdMobBanner} from 'expo-ads-admob';
+import {Channel} from '../../types/graphql';
 import ChannelListItem from '../uis/ChannelListItem';
+import CustomLoadingIndicator from '../uis/CustomLoadingIndicator';
 import EmptyListItem from '../uis/EmptyListItem';
 import type {MainChannelComponent_channel$key} from '../../__generated__/MainChannelComponent_channel.graphql';
 import {MainStackNavigationProps} from '../navigations/MainStackNavigator';
@@ -21,6 +21,7 @@ import {channelsQuery} from '../../relay/queries/Channel';
 import {getString} from '../../../STRINGS';
 import styled from '@emotion/native';
 import {useNavigation} from '@react-navigation/native';
+import {useTheme} from 'dooboo-ui';
 
 const Container = styled.View`
   flex: 1;
@@ -214,7 +215,7 @@ const Screen: FC = () => {
 
   return (
     <Container>
-      <Suspense fallback={<LoadingIndicator />}>
+      <Suspense fallback={<CustomLoadingIndicator />}>
         <ContentContainer searchArgs={searchArgs} />
       </Suspense>
       <TouchableOpacity

diff --git a/client/src/components/pages/MainFriend.tsx b/client/src/components/pages/MainFriend.tsx
@@ -2,9 +2,9 @@ import {FlatList, ListRenderItem} from 'react-native';
 import React, {FC, Suspense, useMemo} from 'react';
 import {graphql, useLazyLoadQuery, usePaginationFragment} from 'react-relay';
 
+import CustomLoadingIndicator from '../uis/CustomLoadingIndicator';
 import EmptyListItem from '../uis/EmptyListItem';
 import {FriendFriendsPaginationQuery} from '../../__generated__/FriendFriendsPaginationQuery.graphql';
-import {LoadingIndicator} from 'dooboo-ui';
 import {MainFriend_friends$key} from '../../__generated__/MainFriend_friends.graphql';
 import {ProfileModal_user$key} from '../../__generated__/ProfileModal_user.graphql';
 import UserListItem from '../uis/UserListItem';
@@ -124,7 +124,7 @@ const Friend: FC = () => {
 const Screen: FC = () => {
   return (
     <Container>
-      <Suspense fallback={<LoadingIndicator />}>
+      <Suspense fallback={<CustomLoadingIndicator />}>
         <Friend />
       </Suspense>
     </Container>

diff --git a/client/src/components/pages/Message.tsx b/client/src/components/pages/Message.tsx
@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {Button, LoadingIndicator, useTheme} from 'dooboo-ui';
+import {Button, useTheme} from 'dooboo-ui';
 import {
   MainStackNavigationProps,
   MainStackParamList,
@@ -38,6 +38,7 @@ import {
 } from '../../utils/ImagePicker';
 
 import {ChannelQuery} from '../../__generated__/ChannelQuery.graphql';
+import CustomLoadingIndicator from '../uis/CustomLoadingIndicator';
 import EmptyListItem from '../uis/EmptyListItem';
 import GiftedChat from '../uis/GiftedChat';
 import {IC_SMILE} from '../../utils/Icons';
@@ -441,7 +442,7 @@ const MessageScreen: FC = () => {
 
   return (
     <Container>
-      <Suspense fallback={<LoadingIndicator />}>
+      <Suspense fallback={<CustomLoadingIndicator />}>
         <ContentContainer searchArgs={searchArgs} channelId={channelId} />
       </Suspense>
     </Container>

diff --git a/client/src/components/pages/SearchUser.tsx b/client/src/components/pages/SearchUser.tsx
@@ -13,9 +13,9 @@ import type {
 } from '../../__generated__/UserUsersPaginationQuery.graphql';
 import {graphql, useLazyLoadQuery, usePaginationFragment} from 'react-relay';
 
+import CustomLoadingIndicator from '../uis/CustomLoadingIndicator';
 import EmptyListItem from '../uis/EmptyListItem';
 import {FontAwesome} from '@expo/vector-icons';
-import {LoadingIndicator} from 'dooboo-ui';
 import {MainStackNavigationProps} from '../navigations/MainStackNavigator';
 import SearchTextInput from '../uis/SearchTextInput';
 import type {SearchUserComponent_user$key} from '../../__generated__/SearchUserComponent_user.graphql';
@@ -199,7 +199,7 @@ const Screen: FC = () => {
           onChangeText={onChangeText}
           value={searchText}
         />
-        <Suspense fallback={<LoadingIndicator />}>
+        <Suspense fallback={<CustomLoadingIndicator />}>
           <ContentContainer scrollY={scrollY} searchArgs={searchArgs} />
         </Suspense>
       </Container>