feat: add loading component

App.tsx

@@ -1,6 +1,9 @@
-import { StatusBar, View } from 'react-native';
+import { StatusBar } from 'react-native';
 import { useFonts, Roboto_400Regular, Roboto_700Bold } from '@expo-google-fonts/roboto';
 import { Center, GluestackUIProvider, Text } from '@gluestack-ui/themed';
+
+import { Loading } from '@components/Loading';
+
 import { config } from './config/gluestack-ui.config';
 
 export default function App() {
@@ -16,7 +19,7 @@ export default function App() {
           <Text color="white" fontSize={34}>Ignite Gym</Text>
         </Center>
       ) : (
-        <Text>Loading...</Text>
+        <Loading />
       )}
       <StatusBar
         barStyle="light-content"

src/components/Loading.tsx

@@ -0,0 +1,9 @@
+import { Center, Spinner } from "@gluestack-ui/themed";
+
+export function Loading() {
+  return (
+    <Center flex={1} bg="$gray700">
+      <Spinner color="$green500" />
+    </Center>
+  )
+}