Merge pull request #56314 from nkdengineer/fix/55842

fix loading indicator when the app is loading

Author: srikarparsi

src/components/Navigation/TopBar.tsx

@@ -42,7 +42,7 @@ function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true,
     const displaySearch = !isAnonymousUser && shouldDisplaySearch;
 
     return (
-        <View style={styles.w100}>
+        <View style={[styles.w100, styles.zIndex10]}>
             <View
                 style={[styles.flexRow, styles.gap4, styles.mh5, styles.mv5, styles.alignItemsCenter, styles.justifyContentBetween]}
                 dataSet={{dragArea: true}}

src/pages/Search/SearchPageNarrow.tsx

@@ -72,6 +72,7 @@ function SearchPageNarrow({queryJSON, policyID, searchName, shouldGroupByReports
             const currentOffset = contentOffset.y;
             const isScrollingDown = currentOffset > scrollOffset.get();
             const distanceScrolled = currentOffset - scrollOffset.get();
+
             if (isScrollingDown && contentOffset.y > TOO_CLOSE_TO_TOP_DISTANCE) {
                 topBarOffset.set(clamp(topBarOffset.get() - distanceScrolled, variables.minimalTopBarOffset, StyleUtils.searchHeaderDefaultOffset));
             } else if (!isScrollingDown && distanceScrolled < 0 && contentOffset.y + layoutMeasurement.height < contentSize.height - TOO_CLOSE_TO_BOTTOM_DISTANCE) {

src/pages/home/sidebar/SidebarLinks.tsx

@@ -9,9 +9,9 @@ import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {confirmReadyToOpenApp, setSidebarLoaded} from '@libs/actions/App';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
-import * as App from '@userActions/App';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type {Report} from '@src/types/onyx';
@@ -44,7 +44,7 @@ function SidebarLinks({insets, optionListItems, isLoading, priorityMode = CONST.
     const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     useEffect(() => {
-        App.confirmReadyToOpenApp();
+        confirmReadyToOpenApp();
     }, []);
 
     useEffect(() => {
@@ -91,10 +91,10 @@ function SidebarLinks({insets, optionListItems, isLoading, priorityMode = CONST.
                     onSelectRow={showReportPage}
                     shouldDisableFocusOptions={shouldUseNarrowLayout}
                     optionMode={viewMode}
-                    onFirstItemRendered={App.setSidebarLoaded}
+                    onFirstItemRendered={setSidebarLoaded}
                 />
                 {!!isLoading && optionListItems?.length === 0 && (
-                    <View style={[StyleSheet.absoluteFillObject, styles.appBG]}>
+                    <View style={[StyleSheet.absoluteFillObject, styles.appBG, styles.mt3]}>
                         <OptionsListSkeletonView shouldAnimate />
                     </View>
                 )}

src/styles/index.ts

@@ -3757,7 +3757,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         narrowSearchHeaderStyle: {
-            paddingTop: 1,
+            paddingTop: 12,
             backgroundColor: theme.appBG,
             flex: 1,
         },
@@ -5429,7 +5429,8 @@ const styles = (theme: ThemeColors) =>
             width: '100%',
             backgroundColor: theme.transparent,
             overflow: 'hidden',
-            marginBottom: -1,
+            position: 'absolute',
+            bottom: -1,
         },
 
         progressBar: {

src/styles/variables.ts

@@ -276,9 +276,9 @@ export default {
     inlineImagePreviewMinSize: 64,
     inlineImagePreviewMaxSize: 148,
 
-    minimalTopBarOffset: -106,
+    minimalTopBarOffset: -124,
     searchHeaderDefaultOffset: 0,
-    searchListContentMarginTop: 116,
+    searchListContentMarginTop: 124,
     searchTopBarZIndex: 9,
     searchTopBarHeight: 52,
     searchRouterInputMargin: 52,