fix: loading indicator style

components/Button.tsx

@@ -1,6 +1,7 @@
-import React, { PropsWithChildren, ReactNode, useMemo } from "react";
-import { TouchableOpacity, Text, ActivityIndicator, View } from "react-native";
 import * as Haptics from "expo-haptics";
+import React, { PropsWithChildren, ReactNode, useMemo } from "react";
+import { Text, TouchableOpacity, View } from "react-native";
+import { Loader } from "./Loader";
 
 interface ButtonProps extends React.ComponentProps<typeof TouchableOpacity> {
   onPress?: () => void;
@@ -57,7 +58,7 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
       {...props}
     >
       {loading ? (
-        <ActivityIndicator color={"white"} size={24} />
+        <Loader />
       ) : (
         <View
           className={`

components/CurrentlyPlayingBar.tsx

@@ -1,5 +1,4 @@
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
 import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
 import { reportPlaybackProgress } from "@/utils/jellyfin/playstate/reportPlaybackProgress";
@@ -14,13 +13,7 @@ import { BlurView } from "expo-blur";
 import { useRouter, useSegments } from "expo-router";
 import { atom, useAtom } from "jotai";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {
-  ActivityIndicator,
-  Alert,
-  Platform,
-  TouchableOpacity,
-  View,
-} from "react-native";
+import { Alert, Platform, TouchableOpacity, View } from "react-native";
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -28,6 +21,7 @@ import Animated, {
 } from "react-native-reanimated";
 import Video, { OnProgressData, VideoRef } from "react-native-video";
 import { Text } from "./common/Text";
+import { Loader } from "./Loader";
 
 export const currentlyPlayingItemAtom = atom<{
   item: BaseItemDto;
@@ -292,7 +286,7 @@ export const CurrentlyPlayingBar: React.FC = () => {
                   renderLoader={
                     item?.Type !== "Audio" && (
                       <View className="flex flex-col items-center justify-center h-full">
-                        <ActivityIndicator size={"small"} color={"white"} />
+                        <Loader />
                       </View>
                     )
                   }

components/DownloadItem.tsx

@@ -9,7 +9,8 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useQuery } from "@tanstack/react-query";
 import { router } from "expo-router";
 import { useAtom } from "jotai";
-import { ActivityIndicator, TouchableOpacity, View } from "react-native";
+import { TouchableOpacity, View } from "react-native";
+import { Loader } from "./Loader";
 import ProgressCircle from "./ProgressCircle";
 
 type DownloadProps = {
@@ -39,7 +40,7 @@ export const DownloadItem: React.FC<DownloadProps> = ({
       if (!item.Id) return false;
 
       const data: BaseItemDto[] = JSON.parse(
-        (await AsyncStorage.getItem("downloaded_files")) || "[]",
+        (await AsyncStorage.getItem("downloaded_files")) || "[]"
       );
 
       return data.some((d) => d.Id === item.Id);
@@ -50,7 +51,7 @@ export const DownloadItem: React.FC<DownloadProps> = ({
   if (isLoading || isLoadingDownloaded) {
     return (
       <View className="rounded h-10 aspect-square flex items-center justify-center">
-        <ActivityIndicator size={"small"} color={"white"} />
+        <Loader />
       </View>
     );
   }
@@ -72,7 +73,7 @@ export const DownloadItem: React.FC<DownloadProps> = ({
       >
         <View className="rounded h-10 aspect-square flex items-center justify-center">
           {process.progress === 0 ? (
-            <ActivityIndicator size={"small"} color={"white"} />
+            <Loader />
           ) : (
             <View className="-rotate-45">
               <ProgressCircle

components/Loader.tsx

@@ -0,0 +1,18 @@
+import {
+  ActivityIndicator,
+  ActivityIndicatorProps,
+  Platform,
+  View,
+} from "react-native";
+
+interface Props extends ActivityIndicatorProps {}
+
+export const Loader: React.FC<Props> = ({ ...props }) => {
+  return (
+    <ActivityIndicator
+      size={"small"}
+      color={Platform.OS === "ios" ? "white" : "#9333ea"}
+      {...props}
+    />
+  );
+};

components/Loading.tsx

@@ -1,9 +0,0 @@
-import { ActivityIndicator, View } from "react-native";
-
-export const Loading: React.FC = () => {
-  return (
-    <View>
-      <ActivityIndicator />
-    </View>
-  );
-};

components/SimilarItems.tsx

@@ -6,14 +6,10 @@ import { useQuery } from "@tanstack/react-query";
 import { router } from "expo-router";
 import { useAtom } from "jotai";
 import { useMemo } from "react";
-import {
-  ActivityIndicator,
-  ScrollView,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import { ItemCardText } from "./ItemCardText";
+import { ScrollView, TouchableOpacity, View } from "react-native";
 import { Text } from "./common/Text";
+import { ItemCardText } from "./ItemCardText";
+import { Loader } from "./Loader";
 
 type SimilarItemsProps = {
   itemId: string;
@@ -49,7 +45,7 @@ export const SimilarItems: React.FC<SimilarItemsProps> = ({ itemId }) => {
       <Text className="px-4 text-2xl font-bold mb-2">Similar items</Text>
       {isLoading ? (
         <View className="my-12">
-          <ActivityIndicator />
+          <Loader />
         </View>
       ) : (
         <ScrollView horizontal>

components/common/HorrizontalScroll.tsx

@@ -1,16 +1,11 @@
 import React, { useEffect } from "react";
-import {
-  ScrollView,
-  View,
-  ViewStyle,
-  ActivityIndicator,
-  ScrollViewProps,
-} from "react-native";
+import { ScrollView, ScrollViewProps, View, ViewStyle } from "react-native";
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
+import { Loader } from "../Loader";
 import { Text } from "./Text";
 
 interface HorizontalScrollProps<T> extends ScrollViewProps {
@@ -58,7 +53,7 @@ export function HorizontalScroll<T>({
           loadingContainerStyle,
         ]}
       >
-        <ActivityIndicator size="small" />
+        <Loader />
       </View>
     );
   }

components/home/LargeMovieCarousel.tsx

@@ -1,22 +1,22 @@
-import { ActivityIndicator, View, ViewProps } from "react-native";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
+import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { Image } from "expo-image";
 import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
-import { useSettings } from "@/utils/atoms/settings";
-import { Dimensions } from "react-native";
+import React, { useMemo } from "react";
+import { Dimensions, View, ViewProps } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 import Carousel, {
   ICarouselInstance,
   Pagination,
 } from "react-native-reanimated-carousel";
-import React, { useMemo } from "react";
-import { Image } from "expo-image";
-import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
-import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
+import { Loader } from "../Loader";
 
 interface Props extends ViewProps {}
 
@@ -84,7 +84,7 @@ export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
   if (l1 || l2)
     return (
       <View className="h-[242px] flex items-center justify-center">
-        <ActivityIndicator size={"small"} color="#fff" />
+        <Loader />
       </View>
     );
 

components/settings/SettingToggles.tsx

@@ -1,18 +1,12 @@
-import {
-  ActivityIndicator,
-  Linking,
-  Switch,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import { Text } from "../common/Text";
-import { useSettings } from "@/utils/atoms/settings";
-import * as DropdownMenu from "zeego/dropdown-menu";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { useAtom } from "jotai";
-import { useState } from "react";
+import { Linking, Switch, TouchableOpacity, View } from "react-native";
+import * as DropdownMenu from "zeego/dropdown-menu";
+import { Text } from "../common/Text";
+import { Loader } from "../Loader";
 
 export const SettingToggles: React.FC = () => {
   const [settings, updateSettings] = useSettings();
@@ -83,7 +77,7 @@ export const SettingToggles: React.FC = () => {
             <TouchableOpacity
               onPress={() => {
                 Linking.openURL(
-                  "https://github.com/lostb1t/jellyfin-plugin-media-lists",
+                  "https://github.com/lostb1t/jellyfin-plugin-media-lists"
                 );
               }}
             >
@@ -121,7 +115,7 @@ export const SettingToggles: React.FC = () => {
                       mediaListCollectionIds:
                         settings?.mediaListCollectionIds.includes(mlc.Id!)
                           ? settings?.mediaListCollectionIds.filter(
-                              (id) => id !== mlc.Id,
+                              (id) => id !== mlc.Id
                             )
                           : [...settings?.mediaListCollectionIds, mlc.Id!],
                     });
@@ -131,7 +125,7 @@ export const SettingToggles: React.FC = () => {
             ))}
             {isLoadingMediaListCollections && (
               <View className="flex flex-row items-center justify-center bg-neutral-900 p-4">
-                <ActivityIndicator size="small" color="#fff" />
+                <Loader />
               </View>
             )}
             {mediaListCollections?.length === 0 && (