LoadingScreen component

app/(app)/_layout.tsx

@@ -1,21 +1,16 @@
 import { useMedplumContext } from "@medplum/react-hooks";
 import { Redirect, Slot } from "expo-router";
-import { View } from "react-native";
 
+import { LoadingScreen } from "@/components/LoadingScreen";
 import { PractitionerBanner } from "@/components/PractitionerBanner";
-import { Spinner } from "@/components/ui/spinner";
 import { ChatProvider } from "@/contexts/ChatContext";
 
 export default function AppLayout() {
   const { medplum, profile } = useMedplumContext();
   const isPractitioner = profile?.resourceType === "Practitioner";
 
   if (medplum.isLoading()) {
-    return (
-      <View className="flex-1 items-center justify-center bg-background-50">
-        <Spinner size="large" />
-      </View>
-    );
+    return <LoadingScreen />;
   }
   if (!medplum.getActiveLogin()) {
     return <Redirect href="/sign-in" />;

app/(app)/index.tsx

@@ -4,9 +4,9 @@ import { useCallback, useMemo, useState } from "react";
 import { View } from "react-native";
 
 import { CreateThreadModal } from "@/components/CreateThreadModal";
+import { LoadingScreen } from "@/components/LoadingScreen";
 import { ThreadList } from "@/components/ThreadList";
 import { ThreadListHeader } from "@/components/ThreadListHeader";
-import { Spinner } from "@/components/ui/spinner";
 import { useAvatars } from "@/hooks/useAvatars";
 import { useThreads } from "@/hooks/useThreads";
 
@@ -27,11 +27,7 @@ export default function Index() {
   }, [medplum, router]);
 
   if (isLoading || isAvatarsLoading) {
-    return (
-      <View className="flex-1 items-center justify-center bg-background-50">
-        <Spinner size="large" />
-      </View>
-    );
+    return <LoadingScreen />;
   }
 
   return (

app/(app)/thread/[id].tsx

@@ -7,7 +7,7 @@ import { Alert, View } from "react-native";
 import { ChatHeader } from "@/components/ChatHeader";
 import { ChatMessageInput } from "@/components/ChatMessageInput";
 import { ChatMessageList } from "@/components/ChatMessageList";
-import { Spinner } from "@/components/ui/spinner";
+import { LoadingScreen } from "@/components/LoadingScreen";
 import { useAvatars } from "@/hooks/useAvatars";
 import { useSingleThread } from "@/hooks/useSingleThread";
 
@@ -103,11 +103,7 @@ export default function ThreadPage() {
   }, [thread, handleSendMessage]);
 
   if (!thread || isAvatarsLoading) {
-    return (
-      <View className="flex-1 items-center justify-center bg-background-50">
-        <Spinner size="large" />
-      </View>
-    );
+    return <LoadingScreen />;
   }
 
   return (

components/LoadingScreen.tsx

@@ -0,0 +1,11 @@
+import { View } from "react-native";
+
+import { Spinner } from "@/components/ui/spinner";
+
+export function LoadingScreen() {
+  return (
+    <View className="flex-1 items-center justify-center bg-background-50">
+      <Spinner size="large" />
+    </View>
+  );
+}