From 517585c4cf2c9847b12b73eafb06becf0a86bbdf Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
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 (
<>
<SearchPageHeader
@@ -199,6 +200,7 @@ function Search({queryJSON, policyIDs, isCustomQuery}: SearchProps) {
queryJSON={queryJSON}
hash={hash}
/>
+ <SearchStatusSkeleton shouldAnimate />
<SearchRowSkeleton shouldAnimate />
</>
);
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 (
+ <View style={[styles.mh5, styles.mb5]}>
+ <SkeletonViewContentLoader
+ animate={shouldAnimate}
+ height={40}
+ backgroundColor={theme.skeletonLHNIn}
+ foregroundColor={theme.skeletonLHNOut}
+ >
+ <Path d="M0 20C0 8.95431 8.95431 0 20 0H48C59.0457 0 68 8.95431 68 20C68 31.0457 59.0457 40 48 40H20C8.9543 40 0 31.0457 0 20Z" />
+ <Rect
+ x={12}
+ y={14}
+ width={12}
+ height={12}
+ fill={theme.hoverComponentBG}
+ />
+ <Rect
+ x={32}
+ y={16}
+ width={24}
+ height={8}
+ fill={theme.hoverComponentBG}
+ />
+ <Rect
+ x={80}
+ y={14}
+ width={12}
+ height={12}
+ />
+ <Rect
+ x={100}
+ y={16}
+ width={40}
+ height={8}
+ />
+ <Rect
+ x={164}
+ y={14}
+ width={12}
+ height={12}
+ />
+ <Rect
+ x={184}
+ y={16}
+ width={52}
+ height={8}
+ />
+ <Rect
+ x={260}
+ y={14}
+ width={12}
+ height={12}
+ />
+ <Rect
+ x={280}
+ y={16}
+ width={40}
+ height={8}
+ />
+ </SkeletonViewContentLoader>
+ </View>
+ );
+}
+
+SearchStatusSkeleton.displayName = 'SearchStatusSkeleton';
+
+export default SearchStatusSkeleton;
From e7ef910917a56ba9f06b7c3b26683e1cef0ea510 Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
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}
>
- <Path d="M0 20C0 8.95431 8.95431 0 20 0H48C59.0457 0 68 8.95431 68 20C68 31.0457 59.0457 40 48 40H20C8.9543 40 0 31.0457 0 20Z" />
<Rect
- x={12}
- y={14}
- width={12}
- height={12}
- fill={theme.hoverComponentBG}
- />
- <Rect
- x={32}
- y={16}
- width={24}
- height={8}
- fill={theme.hoverComponentBG}
+ x={0}
+ y={0}
+ rx={20}
+ ry={20}
+ width={68}
+ height={40}
/>
<Rect
x={80}
@@ -73,6 +66,27 @@ function SearchStatusSkeleton({shouldAnimate = true}: SearchStatusSkeletonProps)
height={8}
/>
</SkeletonViewContentLoader>
+ <View style={[styles.pAbsolute]}>
+ <SkeletonViewContentLoader
+ animate={shouldAnimate}
+ height={40}
+ backgroundColor={theme.hoverComponentBG}
+ foregroundColor={theme.buttonHoveredBG}
+ >
+ <Rect
+ x={12}
+ y={14}
+ width={12}
+ height={12}
+ />
+ <Rect
+ x={32}
+ y={16}
+ width={24}
+ height={8}
+ />
+ </SkeletonViewContentLoader>
+ </View>
</View>
);
}
From 2961eb8cdb9e26b2a767ce74439d3d89e48148f6 Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
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 (
<>
<SearchPageHeader
From aa6179cc67d2bab8cf49a19e3e646ab5d753551b Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
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 (
<>
<SearchPageHeader
diff --git a/src/components/Skeletons/SearchStatusSkeleton.tsx b/src/components/Skeletons/SearchStatusSkeleton.tsx
index 43fe9f7b13d2..bf897233c584 100644
--- a/src/components/Skeletons/SearchStatusSkeleton.tsx
+++ b/src/components/Skeletons/SearchStatusSkeleton.tsx
@@ -66,7 +66,7 @@ function SearchStatusSkeleton({shouldAnimate = true}: SearchStatusSkeletonProps)
height={8}
/>
</SkeletonViewContentLoader>
- <View style={[styles.pAbsolute]}>
+ <View style={[styles.pAbsolute, styles.w100]}>
<SkeletonViewContentLoader
animate={shouldAnimate}
height={40}
From 33dd1d7f681b5126e4a8130f440efcdbd61c33ba Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
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 (
<>
<SearchPageHeader
From dc6fb2de98a64896ebe46cab2deaa4efc9e37e44 Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
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}
/>
- <SearchStatusSkeleton shouldAnimate />
+
+ {/* 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 ? (
+ <SearchStatusBar
+ type={type}
+ status={status}
+ />
+ ) : (
+ <SearchStatusSkeleton shouldAnimate />
+ )}
<SearchRowSkeleton shouldAnimate />
</>
);