feat: loading text button

src/components/BorderGradientButton.js

@@ -1,6 +1,6 @@
 import { BlurView } from 'expo-blur'
 import React from 'react'
-import { Image, Pressable, Text, View } from 'react-native'
+import { ActivityIndicator, Image, Pressable, Text, View } from 'react-native'
 import { Palette, Style } from '../styles'
 import { FONT_FAMILY } from '../styles/Fonts'
 import { size as sizeStyle } from '../styles/Style'
@@ -26,6 +26,8 @@ const BorderGradientButton = ({
   containerStyle = {},
   tint = 'dark',
   disabled = false,
+  loading = false,
+  loadingText = null,
   maxWidth = null,
   size = 'medium',
   height = null,
@@ -34,16 +36,18 @@ const BorderGradientButton = ({
   const buttonHeight = typeof height === 'number' ? height : HEIGHT_BY_SIZE[resolvedSize]
   const fontSize = FONT_SIZE_BY_SIZE[resolvedSize]
   const iconSize = resolvedSize === 'small' ? 14 : 16
+  const isDisabled = disabled || loading
+  const label = loading && typeof loadingText === 'string' ? loadingText : title
 
   return (
     <Pressable
       onPress={onPress}
-      disabled={disabled}
+      disabled={isDisabled}
       style={[
         {
           maxWidth: maxWidth ? maxWidth : null,
           height: buttonHeight,
-          opacity: disabled ? 0.6 : 1,
+          opacity: isDisabled ? 0.6 : 1,
         },
         containerStyle,
       ]}
@@ -83,7 +87,11 @@ const BorderGradientButton = ({
               gap: 11,
             }}
           >
-            {icon && <Image source={icon} style={sizeStyle({ size: iconSize })} />}
+            {loading ? (
+              <ActivityIndicator size="small" color={Palette.white} />
+            ) : (
+              icon && <Image source={icon} style={sizeStyle({ size: iconSize })} />
+            )}
             <Text
               style={{
                 fontSize,
@@ -92,7 +100,7 @@ const BorderGradientButton = ({
                 ...titleStyle,
               }}
             >
-              {title}
+              {label}
             </Text>
           </BlurView>
         </View>

src/screens/Production/PlaybackDownload.js

@@ -501,6 +501,8 @@ const PlaybackDownload = ({ route }) => {
               handlePublish()
             }}
             disabled={isPublishing || !hasAcceptedPublication}
+            loading={isPublishing}
+            loadingText="Publication en cours..."
             containerStyle={styles.continueButton}
           />
         </ScrollView>