From 80edc1a26ab7703dda58e16181346660e42bba70 Mon Sep 17 00:00:00 2001
From: Kaushik Thallapally <thallapallyk@gmail.com>
Date: Mon, 8 Jan 2024 08:05:49 -0800
Subject: [PATCH] feat: added the loading prop to IconButton and updated react
 native (#4201)

---
 example/src/Examples/IconButtonExample.tsx | 27 ++++++++++++++++++++++
 src/components/IconButton/IconButton.tsx   | 13 ++++++++++-
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/example/src/Examples/IconButtonExample.tsx b/example/src/Examples/IconButtonExample.tsx
index d3a9b79143..594ad7a32c 100644
--- a/example/src/Examples/IconButtonExample.tsx
+++ b/example/src/Examples/IconButtonExample.tsx
@@ -18,6 +18,7 @@ const ButtonExample = () => {
           iconColor={MD2Colors.green500}
           onPress={() => {}}
         />
+        <IconButton icon="" size={24} onPress={() => {}} loading />
         <IconButton icon="camera" size={36} onPress={() => {}} />
         <IconButton
           icon="lock"
@@ -37,6 +38,7 @@ const ButtonExample = () => {
           <IconButton icon="camera" size={24} onPress={() => {}} />
           <IconButton icon="camera" selected size={24} onPress={() => {}} />
           <IconButton icon="camera" disabled size={24} onPress={() => {}} />
+          <IconButton icon="camera" size={24} onPress={() => {}} loading />
         </View>
       </List.Section>
 
@@ -62,6 +64,14 @@ const ButtonExample = () => {
             size={24}
             onPress={() => {}}
           />
+          <IconButton
+            icon=""
+            mode="contained"
+            selected
+            loading
+            size={24}
+            onPress={() => {}}
+          />
         </View>
       </List.Section>
 
@@ -87,6 +97,14 @@ const ButtonExample = () => {
             size={24}
             onPress={() => {}}
           />
+          <IconButton
+            icon=""
+            mode="contained-tonal"
+            disabled
+            size={24}
+            onPress={() => {}}
+            loading
+          />
         </View>
       </List.Section>
 
@@ -112,6 +130,14 @@ const ButtonExample = () => {
             size={24}
             onPress={() => {}}
           />
+          <IconButton
+            icon=""
+            mode="outlined"
+            disabled
+            size={24}
+            onPress={() => {}}
+            loading
+          />
         </View>
       </List.Section>
 
@@ -139,6 +165,7 @@ const ButtonExample = () => {
             containerColor={MD3Colors.tertiary60}
           />
           <IconButton icon="heart" size={60} onPress={() => {}} />
+          <IconButton icon="" size={60} onPress={() => {}} loading />
         </View>
       </List.Section>
     </ScreenWrapper>
diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
index 9aa4f7a929..84db018d38 100644
--- a/src/components/IconButton/IconButton.tsx
+++ b/src/components/IconButton/IconButton.tsx
@@ -13,6 +13,7 @@ import { getIconButtonColor } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { $RemoveChildren, ThemeProp } from '../../types';
 import { forwardRef } from '../../utils/forwardRef';
+import ActivityIndicator from '../ActivityIndicator';
 import CrossFadeIcon from '../CrossFadeIcon';
 import Icon, { IconSource } from '../Icon';
 import Surface from '../Surface';
@@ -80,6 +81,11 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
    * @optional
    */
   theme?: ThemeProp;
+  /**
+   * @optional
+   * If true Activity Indicator will appear instead of icon
+   */
+  loading?: boolean;
 };
 
 /**
@@ -121,6 +127,7 @@ const IconButton = forwardRef<View, Props>(
       style,
       theme: themeOverrides,
       testID = 'icon-button',
+      loading = false,
       ...rest
     }: Props,
     ref
@@ -192,7 +199,11 @@ const IconButton = forwardRef<View, Props>(
           testID={testID}
           {...rest}
         >
-          <IconComponent color={iconColor} source={icon} size={size} />
+          {loading ? (
+            <ActivityIndicator size={size} color={iconColor} />
+          ) : (
+            <IconComponent color={iconColor} source={icon} size={size} />
+          )}
         </TouchableRipple>
       </Surface>
     );