From 517585c4cf2c9847b12b73eafb06becf0a86bbdf Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 15 Aug 2024 12:35:43 -0600 Subject: [PATCH 1/6] create status skeleton --- src/components/Search/index.tsx | 4 +- .../Skeletons/SearchStatusSkeleton.tsx | 82 +++++++++++++++++++ 2 files changed, 85 insertions(+), 1 deletion(-) create mode 100644 src/components/Skeletons/SearchStatusSkeleton.tsx diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index 0fb2daede842..f2039de83cfd 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'; @@ -191,7 +192,7 @@ function Search({queryJSON, policyIDs, isCustomQuery}: SearchProps) { turnOffMobileSelectionMode(); }, [isSearchResultsEmpty, prevIsSearchResultEmpty]); - if (shouldShowLoadingState) { + if (true) { return ( <> + ); diff --git a/src/components/Skeletons/SearchStatusSkeleton.tsx b/src/components/Skeletons/SearchStatusSkeleton.tsx new file mode 100644 index 000000000000..151267c669c6 --- /dev/null +++ b/src/components/Skeletons/SearchStatusSkeleton.tsx @@ -0,0 +1,82 @@ +import React from 'react'; +import {View} from 'react-native'; +import {Path, 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; From e7ef910917a56ba9f06b7c3b26683e1cef0ea510 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 15 Aug 2024 13:09:25 -0600 Subject: [PATCH 2/6] fix style --- .../Skeletons/SearchStatusSkeleton.tsx | 42 ++++++++++++------- 1 file changed, 28 insertions(+), 14 deletions(-) diff --git a/src/components/Skeletons/SearchStatusSkeleton.tsx b/src/components/Skeletons/SearchStatusSkeleton.tsx index 151267c669c6..43fe9f7b13d2 100644 --- a/src/components/Skeletons/SearchStatusSkeleton.tsx +++ b/src/components/Skeletons/SearchStatusSkeleton.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {View} from 'react-native'; -import {Path, Rect} from 'react-native-svg'; +import {Rect} from 'react-native-svg'; import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -21,20 +21,13 @@ function SearchStatusSkeleton({shouldAnimate = true}: SearchStatusSkeletonProps) backgroundColor={theme.skeletonLHNIn} foregroundColor={theme.skeletonLHNOut} > - - + + + + + + ); } From 2961eb8cdb9e26b2a767ce74439d3d89e48148f6 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 15 Aug 2024 13:11:34 -0600 Subject: [PATCH 3/6] rm hardcoded value --- src/components/Search/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index f2039de83cfd..f4c77445bec7 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -192,7 +192,7 @@ function Search({queryJSON, policyIDs, isCustomQuery}: SearchProps) { turnOffMobileSelectionMode(); }, [isSearchResultsEmpty, prevIsSearchResultEmpty]); - if (true) { + if (shouldShowLoadingState) { return ( <> Date: Thu, 15 Aug 2024 15:32:16 -0600 Subject: [PATCH 4/6] add width do fix bug on ios --- src/components/Search/index.tsx | 2 +- src/components/Skeletons/SearchStatusSkeleton.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index f4c77445bec7..f2039de83cfd 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -192,7 +192,7 @@ function Search({queryJSON, policyIDs, isCustomQuery}: SearchProps) { turnOffMobileSelectionMode(); }, [isSearchResultsEmpty, prevIsSearchResultEmpty]); - if (shouldShowLoadingState) { + if (true) { return ( <> - + Date: Thu, 15 Aug 2024 15:41:08 -0600 Subject: [PATCH 5/6] rm hardcoded value --- src/components/Search/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index f2039de83cfd..f4c77445bec7 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -192,7 +192,7 @@ function Search({queryJSON, policyIDs, isCustomQuery}: SearchProps) { turnOffMobileSelectionMode(); }, [isSearchResultsEmpty, prevIsSearchResultEmpty]); - if (true) { + if (shouldShowLoadingState) { return ( <> Date: Wed, 28 Aug 2024 16:13:09 -0600 Subject: [PATCH 6/6] only show skeleton on first render --- src/components/Search/index.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index c144a4201dd4..e72498e64cd9 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -200,7 +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 ? ( + + ) : ( + + )} );