Merge pull request #47555 from tienifr/fix/regression-empty-ui

Prevent overflow empty UI and space above skeleton
Expensify · Aug 17, 2024 · faf2480 · faf2480
2 parents 7615898 + 895cc51
commit faf2480
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/src/components/EmptySelectionListContent.tsx b/src/components/EmptySelectionListContent.tsx
@@ -39,7 +39,7 @@ function EmptySelectionListContent({contentType}: EmptySelectionListContentProps
     );
 
     return (
-        <View style={[styles.flex1, styles.overflowHidden]}>
+        <View style={[styles.flex1, styles.overflowHidden, styles.minHeight65]}>
             <BlockingView
                 icon={Illustrations.ToddWithPhones}
                 iconWidth={variables.emptySelectionListIconWidth}

diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
@@ -687,9 +687,10 @@ function BaseSelectionList<TItem extends ListItem>(
                     )}
                     {/* If we are loading new options we will avoid showing any header message. This is mostly because one of the header messages says there are no options. */}
                     {/* This is misleading because we might be in the process of loading fresh options from the server. */}
-                    {(((!isLoadingNewOptions || headerMessage !== translate('common.noResultsFound')) && !!headerMessage) || flattenedSections.allOptions.length === 0) && (
+                    {(((!isLoadingNewOptions || headerMessage !== translate('common.noResultsFound')) && !!headerMessage) ||
+                        (flattenedSections.allOptions.length === 0 && !showLoadingPlaceholder)) && (
                         <View style={headerMessageStyle ?? [styles.ph5, styles.pb5]}>
-                            <Text style={[styles.textLabel, styles.colorMuted]}>{headerMessage}</Text>
+                            <Text style={[styles.textLabel, styles.colorMuted, styles.minHeight5]}>{headerMessage}</Text>
                         </View>
                     )}
                     {!!headerContent && headerContent}

diff --git a/src/styles/utils/spacing.ts b/src/styles/utils/spacing.ts
@@ -664,4 +664,12 @@ export default {
     rowGap4: {
         rowGap: 16,
     },
+
+    minHeight5: {
+        minHeight: 20,
+    },
+
+    minHeight65: {
+        minHeight: 260,
+    },
 } satisfies Record<string, ViewStyle>;