From 9780db36f1ba8a1ced94e8b8a948259c73a28d19 Mon Sep 17 00:00:00 2001
From: Vinicius Souza <dev@viniciussouza.me>
Date: Thu, 24 Oct 2024 08:08:27 -0300
Subject: [PATCH] feat: add loading component

---
 App.tsx                    | 7 +++++--
 src/components/Loading.tsx | 9 +++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Loading.tsx

diff --git a/App.tsx b/App.tsx
index f26d3d8..75c884a 100644
--- a/App.tsx
+++ b/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"
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
new file mode 100644
index 0000000..935ae75
--- /dev/null
+++ b/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>
+  )
+}