LoadingButtonSpinner component

components/ChatHeader.tsx

@@ -6,8 +6,9 @@ import { ChevronLeftIcon, TrashIcon, UserRound, XIcon } from "lucide-react-nativ
 import { useMemo } from "react";
 import { View } from "react-native";
 
+import { LoadingButtonSpinner } from "@/components/LoadingButtonSpinner";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
-import { Button, ButtonIcon, ButtonSpinner, ButtonText } from "@/components/ui/button";
+import { Button, ButtonIcon, ButtonText } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
 import { Pressable } from "@/components/ui/pressable";
 import { Text } from "@/components/ui/text";
@@ -118,7 +119,7 @@ export function ChatHeader({
               className="mr-2"
             >
               {isDeleting ? (
-                <ButtonSpinner />
+                <LoadingButtonSpinner />
               ) : (
                 <>
                   <ButtonIcon as={TrashIcon} size="sm" />

components/ChatMessageBubble.tsx

@@ -2,14 +2,14 @@ import { useMedplumProfile } from "@medplum/react-hooks";
 import { useVideoPlayer } from "expo-video";
 import { VideoView } from "expo-video";
 import { CirclePlay, FileDown, UserRound } from "lucide-react-native";
-import { useColorScheme } from "nativewind";
 import { memo, useCallback, useRef, useState } from "react";
 import { Pressable, StyleSheet, View } from "react-native";
 import { Alert } from "react-native";
 
 import { FullscreenImage } from "@/components/FullscreenImage";
+import { LoadingButtonSpinner } from "@/components/LoadingButtonSpinner";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
-import { Button, ButtonIcon, ButtonSpinner, ButtonText } from "@/components/ui/button";
+import { Button, ButtonIcon, ButtonText } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
 import { Text } from "@/components/ui/text";
 import type { ChatMessage } from "@/models/chat";
@@ -85,7 +85,6 @@ VideoAttachment.displayName = "VideoAttachment";
 
 function FileAttachment({ attachment }: { attachment: AttachmentWithUrl }) {
   const [isDownloading, setIsDownloading] = useState(false);
-  const { colorScheme } = useColorScheme();
 
   const handleShare = useCallback(async () => {
     setIsDownloading(true);
@@ -106,7 +105,7 @@ function FileAttachment({ attachment }: { attachment: AttachmentWithUrl }) {
       disabled={isDownloading}
     >
       {isDownloading ? (
-        <ButtonSpinner color={colorScheme === "dark" ? "black" : "white"} />
+        <LoadingButtonSpinner />
       ) : (
         <ButtonIcon as={FileDown} className="text-typography-100" />
       )}

components/CreateThreadModal.tsx

@@ -1,9 +1,9 @@
 import { useRouter } from "expo-router";
-import { useColorScheme } from "nativewind";
 import { useState } from "react";
 
+import { LoadingButtonSpinner } from "@/components/LoadingButtonSpinner";
 import { Modal, ModalBody, ModalFooter, ModalHeader } from "@/components/Modal";
-import { Button, ButtonSpinner, ButtonText } from "@/components/ui/button";
+import { Button, ButtonText } from "@/components/ui/button";
 import { Input, InputField } from "@/components/ui/input";
 import { View } from "@/components/ui/view";
 
@@ -16,7 +16,6 @@ interface CreateThreadModalProps {
 export function CreateThreadModal({ isOpen, onClose, onCreateThread }: CreateThreadModalProps) {
   const [topic, setTopic] = useState("");
   const [isCreating, setIsCreating] = useState(false);
-  const { colorScheme } = useColorScheme();
   const router = useRouter();
 
   const handleCreate = async () => {
@@ -55,11 +54,7 @@ export function CreateThreadModal({ isOpen, onClose, onCreateThread }: CreateThr
           <ButtonText>Cancel</ButtonText>
         </Button>
         <Button className="min-w-[100px]" disabled={!isValid || isCreating} onPress={handleCreate}>
-          {isCreating ? (
-            <ButtonSpinner color={colorScheme === "dark" ? "black" : "white"} />
-          ) : (
-            <ButtonText>Create</ButtonText>
-          )}
+          {isCreating ? <LoadingButtonSpinner /> : <ButtonText>Create</ButtonText>}
         </Button>
       </ModalFooter>
     </Modal>

components/LoadingButtonSpinner.tsx

@@ -0,0 +1,17 @@
+import { useColorScheme } from "nativewind";
+
+import { ButtonSpinner } from "@/components/ui/button";
+
+interface LoadingButtonSpinnerProps {
+  /**
+   * Optional override for spinner color. If not provided, will use white for light mode and black for dark mode
+   */
+  color?: string;
+}
+
+export function LoadingButtonSpinner({ color }: LoadingButtonSpinnerProps) {
+  const { colorScheme } = useColorScheme();
+  const spinnerColor = color ?? (colorScheme === "dark" ? "black" : "white");
+
+  return <ButtonSpinner color={spinnerColor} />;
+}