From 736080ae03205c23171440d2232c1162a93e167d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fl=C3=A1vio=20Juvenal?= <flavio@vinta.com.br>
Date: Tue, 28 Jan 2025 13:20:12 -0300
Subject: [PATCH] LoadingScreen component

---
 app/(app)/_layout.tsx        |  9 ++-------
 app/(app)/index.tsx          |  8 ++------
 app/(app)/thread/[id].tsx    |  8 ++------
 components/LoadingScreen.tsx | 11 +++++++++++
 4 files changed, 17 insertions(+), 19 deletions(-)
 create mode 100644 components/LoadingScreen.tsx

diff --git a/app/(app)/_layout.tsx b/app/(app)/_layout.tsx
index 7d177f8..57cf7d1 100644
--- a/app/(app)/_layout.tsx
+++ b/app/(app)/_layout.tsx
@@ -1,9 +1,8 @@
 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() {
@@ -11,11 +10,7 @@ export default function AppLayout() {
   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" />;
diff --git a/app/(app)/index.tsx b/app/(app)/index.tsx
index ba56167..33f270f 100644
--- a/app/(app)/index.tsx
+++ b/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 (
diff --git a/app/(app)/thread/[id].tsx b/app/(app)/thread/[id].tsx
index b91ea65..ec5d545 100644
--- a/app/(app)/thread/[id].tsx
+++ b/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 (
diff --git a/components/LoadingScreen.tsx b/components/LoadingScreen.tsx
new file mode 100644
index 0000000..571c816
--- /dev/null
+++ b/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>
+  );
+}