feat(195): setear el loading en el boton de search (#196)

## Que hace esta Pull Request?
- Poner el marcador de loader en el botón

## Por qué se hace esta implementación?
- Para mejorar la experiencia del usuario

## A quién/qué puede impactar?
- A los usuarios que usen el buscador 

## Cómo probaste esta implementación?
- Iphone12Pro

app/screens/home/home.tsx

@@ -21,7 +21,7 @@ import Toast from "react-native-toast-message";
 import {type IUserProfileBase} from "@/app/services/fortnite/fortnite.interface";
 import FortniteService from "@/app/services/fortnite/fortnite.service";
 import LocalStoreService from "@/app/services/localStore/localStore.service";
-import {ButtonInput} from "@/components/elements/ButtonInput";
+import {ButtonInput} from "@/components/elements/buttonInput";
 import {Img} from "@/components/elements/Img";
 import Selector from "@/components/elements/Selector";
 import Timer from "@/components/elements/Timer";
@@ -56,8 +56,9 @@ export default function HomeScreen() {
     fortniteService.getProfileByUsername(fortniteUsername, fortnitePlatform as "epic" | "psn" | "xbl").then(
       (res: IUserProfileBase) => {
         setIsLoadingSearch(!isLoadingSearch)
-        storeRecentSearch(fortniteUsername, res.account.id).then()
-
+        storeRecentSearch(fortniteUsername, res.account.id).then(() => {
+          setIsLoadingSearch(false)
+        })
         // GO TO STATS VIEW
         navigation.dispatch(
           CommonActions.navigate({
@@ -68,6 +69,7 @@ export default function HomeScreen() {
             }
           }));
       }).catch(() => {
+      setIsLoadingSearch(false)
       Toast.show({
         type: 'error',
         text1: 'Username not found',
@@ -292,7 +294,7 @@ export default function HomeScreen() {
               <Selector onSelect={onItemSelected} setValue={platform}></Selector>
             </View>
           </View>
-          <ButtonInput onClick={() => goToStats()}>Search</ButtonInput>
+          <ButtonInput onClick={() => goToStats()} isLoading={isLoadingSearch}>Search</ButtonInput>
 
           {/* RECENT SEARCH PILLS */}
           <View style={styles.recentSearchContainer}>

components/elements/ButtonInput.tsx → components/elements/buttonInput.tsx

@@ -1,9 +1,9 @@
-import React, {useState} from 'react';
-import {Pressable, StyleSheet, Text, View} from "react-native";
+import React from 'react';
+import {ActivityIndicator, Pressable, Text, View} from "react-native";
+
 import {Colors, Fonts} from "@/constants/Colors";
 
-export const ButtonInput = ({onLoad, onClick, children, style, ...rest}: any) => {
-  const [isLoaded, setIsLoaded] = useState<boolean>(false)
+export const ButtonInput = ({onClick, isLoading, children}: any) => {
 
   return (
     <View style={{
@@ -16,9 +16,14 @@ export const ButtonInput = ({onLoad, onClick, children, style, ...rest}: any) =>
           borderRadius: 8,
           alignItems: 'center',
         }}>
-          <Text style={{fontSize: Fonts.size.s, color: '#fbefff'}}>
-            {children}
-          </Text>
+          {isLoading ?
+            <ActivityIndicator></ActivityIndicator>
+            :
+            <Text style={{fontSize: Fonts.size.s, color: '#fbefff'}}>
+              {children}
+            </Text>
+          }
+
         </View>
         {/*{!isLoaded && (*/}
         {/*  <View style={[StyleSheet.absoluteFill, styles.spinner]}>*/}
@@ -29,11 +34,3 @@ export const ButtonInput = ({onLoad, onClick, children, style, ...rest}: any) =>
     </View>
   )
 }
-
-const styles = StyleSheet.create({
-  spinner: {
-    padding: 10,
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-})