Browse Source

added splash spinner screen

Viktoriia 9 months ago
parent
commit
b612211e82
2 changed files with 20 additions and 5 deletions
  1. 6 5
      Route.tsx
  2. 14 0
      src/components/SplashSpinner/index.tsx

+ 6 - 5
Route.tsx

@@ -90,6 +90,7 @@ import NotificationsListScreen from 'src/screens/NotificationsScreen/Notificatio
 import FriendsNotificationsScreen from 'src/screens/NotificationsScreen/FriendsNotificactionsScreen';
 import MessagesNotificationsScreen from 'src/screens/NotificationsScreen/MessagesNotificationsScreen';
 import SystemNotificationsScreen from 'src/screens/NotificationsScreen/SystemNotificationsScreen';
+import { Splash } from 'src/components/SplashSpinner';
 
 enableScreens();
 
@@ -160,8 +161,9 @@ const Route = () => {
     const prepareApp = async () => {
       await checkNmToken();
       await checkTokenAndUpdate();
-      setDbLoaded(true);
+      await openDatabases();
       await findFastestServer();
+      setDbLoaded(true);
     };
 
     const findFastestServer = async () => {
@@ -178,16 +180,15 @@ const Route = () => {
 
   useEffect(() => {
     const hideSplashScreen = async () => {
-      if (fontsLoaded && dbLoaded) {
+      if (fontsLoaded) {
         await SplashScreen.hideAsync();
-        await openDatabases();
         await fetchAndSaveUserInfo();
         await setupDatabaseAndSync();
       }
     };
 
     hideSplashScreen();
-  }, [fontsLoaded, dbLoaded]);
+  }, [fontsLoaded]);
 
   const checkTokenAndUpdate = async () => {
     const storedToken = storage.get('deviceToken', StoreType.STRING);
@@ -203,7 +204,7 @@ const Route = () => {
   };
 
   if (!fontsLoaded || !dbLoaded) {
-    return null;
+    return <Splash />;
   }
 
   const screenOptions = ({

+ 14 - 0
src/components/SplashSpinner/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ActivityIndicator, ImageBackground } from 'react-native';
+import { Colors } from 'src/theme';
+
+export const Splash = () => {
+  return (
+    <ImageBackground
+      source={require('../../../assets/loading-screen.png')}
+      style={{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }}
+    >
+      <ActivityIndicator size={'large'} color={Colors.WHITE} style={{ paddingTop: '70%' }} />
+    </ImageBackground>
+  );
+};