fix(mobile): Fix premature rendering of the app if the setting is not loaded

2 files changed, 26 insertions, 4 deletions

diff --git a/apps/mobile/app/signin.tsx b/apps/mobile/app/signin.tsx
index da7e2fea..07ab8e08 100644
--- a/apps/mobile/app/signin.tsx
+++ b/apps/mobile/app/signin.tsx
@@ -74,8 +74,8 @@ export default function Signin() {
               value={settings.address}
               autoCapitalize="none"
               keyboardType="url"
-              onEndEditing={(e) =>
-                setSettings({ ...settings, address: e.nativeEvent.text })
+              onChangeText={(e) =>
+                setSettings({ ...settings, address: e })
               }
             />
           </View>
diff --git a/apps/mobile/lib/providers.tsx b/apps/mobile/lib/providers.tsx
index 036e8ae2..38eaa99e 100644
--- a/apps/mobile/lib/providers.tsx
+++ b/apps/mobile/lib/providers.tsx
@@ -1,9 +1,11 @@
 import { useEffect, useState } from "react";
+import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import { ToastProvider } from "@/components/ui/Toast";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { httpBatchLink } from "@trpc/client";
 import superjson from "superjson";
 
+import type { Settings } from "./settings";
 import useAppSettings, { getAppSettings } from "./settings";
 import { api } from "./trpc";
 
@@ -26,8 +28,13 @@ function getTRPCClient(address: string) {
   });
 }
 
-export function Providers({ children }: { children: React.ReactNode }) {
-  const { settings } = useAppSettings();
+function TrpcProvider({
+  children,
+  settings,
+}: {
+  settings: Settings;
+  children: React.ReactNode;
+}) {
   const [queryClient] = useState(() => new QueryClient());
 
   const [trpcClient, setTrpcClient] = useState<
@@ -50,3 +57,18 @@ export function Providers({ children }: { children: React.ReactNode }) {
     </api.Provider>
   );
 }
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const { settings, isLoading } = useAppSettings();
+
+  if (isLoading) {
+    // Don't render anything if the settings still hasn't been loaded
+    return <FullPageSpinner />;
+  }
+
+  return (
+    <TrpcProvider settings={settings}>
+      <ToastProvider>{children}</ToastProvider>
+    </TrpcProvider>
+  );
+}