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;