chore: Update loading screen and background color for improved user experience

app.json

@@ -34,7 +34,7 @@
           "image": "./assets/images/racoon-splash.png",
           "imageWidth": 200,
           "resizeMode": "contain",
-          "backgroundColor": "#ffffff"
+          "backgroundColor": "#1E1E1E"
         }
       ],
       "expo-secure-store",

src/components/AuthenticatedWrapper.tsx

@@ -1,17 +1,13 @@
 import React from "react";
 import {useAuth} from "@/src/stores/authStore";
 import NotAuthenticated from "@/src/components/NotAuthenticated";
-import { ActivityIndicator, View } from "react-native";
+import LoadingScreen from "@/src/components/LoadingScreen";
 
 const AuthenticatedWrapper: React.FC<{ children: React.ReactNode }> = ({children}) => {
     const {isAuthenticated, loading, authenticatedUser, isHydrated} = useAuth();
 
     if (!isHydrated || loading) {
-        return (
-            <View className="flex-1 items-center justify-center">
-                <ActivityIndicator size="large" />
-            </View>
-        );
+        return <LoadingScreen />;
     }
 
     if (!isAuthenticated || !authenticatedUser) {

src/components/LoadingScreen.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { View, ActivityIndicator } from "react-native";
+import { useColorScheme } from "nativewind";
+import Logo from "./Logo";
+
+export default function LoadingScreen() {
+    const { colorScheme } = useColorScheme();
+    const isDark = colorScheme === 'dark';
+
+    return (
+        <View
+            className="flex-1 items-center justify-center"
+            style={{
+                backgroundColor: isDark ? '#121212' : '#ffffff'
+            }}
+        >
+            <Logo size="large" />
+            <ActivityIndicator
+                size="large"
+                color={isDark ? '#BB86FC' : '#6200EE'}
+                style={{ marginTop: 20 }}
+            />
+        </View>
+    );
+}
+