diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index a5d8e48ed546..e72498e64cd9 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -9,6 +9,7 @@ import SearchTableHeader from '@components/SelectionList/SearchTableHeader';
import type {ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
import SelectionListWithModal from '@components/SelectionListWithModal';
import SearchRowSkeleton from '@components/Skeletons/SearchRowSkeleton';
+import SearchStatusSkeleton from '@components/Skeletons/SearchStatusSkeleton';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import usePrevious from '@hooks/usePrevious';
@@ -199,6 +200,16 @@ function Search({queryJSON, isCustomQuery}: SearchProps) {
queryJSON={queryJSON}
hash={hash}
/>
+
+ {/* We only want to display the skeleton for the status filters the first time we load them for a specific data type */}
+ {searchResults?.search?.type === type ? (
+
+ ) : (
+
+ )}
>
);
diff --git a/src/components/Skeletons/SearchStatusSkeleton.tsx b/src/components/Skeletons/SearchStatusSkeleton.tsx
new file mode 100644
index 000000000000..bf897233c584
--- /dev/null
+++ b/src/components/Skeletons/SearchStatusSkeleton.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import {View} from 'react-native';
+import {Rect} from 'react-native-svg';
+import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+type SearchStatusSkeletonProps = {
+ shouldAnimate?: boolean;
+};
+
+function SearchStatusSkeleton({shouldAnimate = true}: SearchStatusSkeletonProps) {
+ const theme = useTheme();
+ const styles = useThemeStyles();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+SearchStatusSkeleton.displayName = 'SearchStatusSkeleton';
+
+export default SearchStatusSkeleton;