feat: added loading icon in Searchbar

example/src/Examples/SearchbarExample.tsx

@@ -12,6 +12,7 @@ const SearchExample = ({ navigation }: Props) => {
   const [firstQuery, setFirstQuery] = React.useState<string>('');
   const [secondQuery, setSecondQuery] = React.useState<string>('');
   const [thirdQuery, setThirdQuery] = React.useState<string>('');
+  const [fourthQuery, setFourthQuery] = React.useState<string>('');
 
   const { isV3 } = useTheme();
 
@@ -44,6 +45,14 @@ const SearchExample = ({ navigation }: Props) => {
         icon="menu"
         style={styles.searchbar}
       />
+
+      <Searchbar
+        placeholder="Search"
+        onChangeText={(query: string) => setFourthQuery(query)}
+        value={fourthQuery}
+        loading
+        style={styles.searchbar}
+      />
     </ScreenWrapper>
   );
 };

src/components/Searchbar.tsx

@@ -18,6 +18,9 @@ import { withTheme } from '../core/theming';
 import type { IconSource } from './Icon';
 import type { Theme } from '../types';
 import MaterialCommunityIcon from './MaterialCommunityIcon';
+import ActivityIndicator, {
+  Props as ActivityIndicatorProps,
+} from './ActivityIndicator';
 
 export type Props = React.ComponentPropsWithRef<typeof TextInput> & {
   /**
@@ -70,6 +73,14 @@ export type Props = React.ComponentPropsWithRef<typeof TextInput> & {
    * Custom icon for clear button, default will be icon close
    */
   clearIcon?: IconSource;
+  /**
+   * Custom flag for replacing clear button with activity indicator.
+   */
+  loading?: Boolean;
+  /**
+   * Custom styles for the activity indicator.
+   */
+  loaderStyle?: Omit<ActivityIndicatorProps, 'theme'>;
 };
 
 type TextInputHandles = Pick<
@@ -122,6 +133,8 @@ const Searchbar = React.forwardRef<TextInputHandles, Props>(
       style,
       theme,
       value,
+      loading = false,
+      loaderStyle,
       ...rest
     }: Props,
     ref
@@ -218,26 +231,30 @@ const Searchbar = React.forwardRef<TextInputHandles, Props>(
           value={value}
           {...rest}
         />
-        <IconButton
-          borderless
-          disabled={!value}
-          accessibilityLabel={clearAccessibilityLabel}
-          iconColor={value ? iconColor : 'rgba(255, 255, 255, 0)'}
-          rippleColor={rippleColor}
-          onPress={handleClearPress}
-          icon={
-            clearIcon ||
-            (({ size, color }) => (
-              <MaterialCommunityIcon
-                name="close"
-                color={color}
-                size={size}
-                direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
-              />
-            ))
-          }
-          accessibilityRole="button"
-        />
+        {loading ? (
+          <ActivityIndicator {...loaderStyle} style={styles.loader} />
+        ) : (
+          <IconButton
+            borderless
+            disabled={!value}
+            accessibilityLabel={clearAccessibilityLabel}
+            iconColor={value ? iconColor : 'rgba(255, 255, 255, 0)'}
+            rippleColor={rippleColor}
+            onPress={handleClearPress}
+            icon={
+              clearIcon ||
+              (({ size, color }) => (
+                <MaterialCommunityIcon
+                  name="close"
+                  color={color}
+                  size={size}
+                  direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
+                />
+              ))
+            }
+            accessibilityRole="button"
+          />
+        )}
       </Surface>
     );
   }
@@ -259,6 +276,9 @@ const styles = StyleSheet.create({
   elevation: {
     elevation: 4,
   },
+  loader: {
+    margin: 10,
+  },
 });
 
 export default withTheme(Searchbar);

src/components/__tests__/Searchbar.test.js

@@ -1,3 +1,4 @@
+import { render } from '@testing-library/react-native';
 import * as React from 'react';
 import renderer from 'react-test-renderer';
 import Searchbar from '../Searchbar.tsx';
@@ -15,3 +16,31 @@ it('renders with text', () => {
 
   expect(tree).toMatchSnapshot();
 });
+
+it('activity indicator snapshot test', () => {
+  const tree = renderer.create(<Searchbar loading={true} />).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders with ActivityIndicator', () => {
+  const tree = render(
+    <Searchbar
+      loading={true}
+      loaderStyle={{ testID: 'withActivityIndicator' }}
+    />
+  );
+
+  expect(tree.getByTestId('withActivityIndicator')).toBeTruthy();
+});
+
+it('renders without ActivityIndicator', () => {
+  const tree = render(
+    <Searchbar
+      loading={false}
+      loaderStyle={{ testID: 'withOutActivityIndicator' }}
+    />
+  );
+
+  expect(() => tree.getByTestId('withOutActivityIndicator')).toThrow();
+});