Fix LHN flickers and scroll position restoring

src/components/LHNOptionsList/LHNOptionsList.tsx

@@ -11,6 +11,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import LottieAnimations from '@components/LottieAnimations';
 import {ScrollOffsetContext} from '@components/ScrollOffsetContextProvider';
 import TextBlock from '@components/TextBlock';
+import useLHNEstimatedListSize from '@hooks/useLHNEstimatedListSize';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -48,6 +49,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
     const styles = useThemeStyles();
     const {translate, preferredLocale} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const estimatedListSize = useLHNEstimatedListSize();
     const shouldShowEmptyLHN = shouldUseNarrowLayout && data.length === 0;
 
     // When the first item renders we want to call the onFirstItemRendered callback.
@@ -284,6 +286,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
                     showsVerticalScrollIndicator={false}
                     onLayout={onLayout}
                     onScroll={onScroll}
+                    estimatedListSize={estimatedListSize}
                 />
             )}
         </View>

src/hooks/useLHNEstimatedListSize/index.native.ts

@@ -0,0 +1,18 @@
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import variables from '@styles/variables';
+import type UseLHNEstimatedListSize from './types';
+
+/**
+ * This a native specific implementation for FlashList of LHNOptionsList. It calculates estimated visible height and width of the list. It is not the scroll content size. Defining this prop will enable the list to be rendered immediately. Without it, the list first needs to measure its size, leading to a small delay during the first render.
+ */
+const useLHNEstimatedListSize: UseLHNEstimatedListSize = () => {
+    const {windowHeight, windowWidth} = useWindowDimensions();
+    const listHeight = windowHeight - variables.bottomTabHeight;
+
+    return {
+        height: listHeight,
+        width: windowWidth,
+    };
+};
+
+export default useLHNEstimatedListSize;

src/hooks/useLHNEstimatedListSize/index.ts

@@ -0,0 +1,8 @@
+import type UseLHNEstimatedListSize from './types';
+
+/**
+ * This is the web implementation. It is intentionally left unimplemented because it does not function correctly on the web.
+ */
+const useLHNEstimatedListSize: UseLHNEstimatedListSize = () => undefined;
+
+export default useLHNEstimatedListSize;

src/hooks/useLHNEstimatedListSize/types.ts

@@ -0,0 +1,8 @@
+type UseLHNEstimatedListSize = () =>
+    | {
+          height: number;
+          width: number;
+      }
+    | undefined;
+
+export default UseLHNEstimatedListSize;

tests/perf-test/SidebarLinks.perf-test.tsx

@@ -28,6 +28,7 @@ jest.mock('../../src/libs/Navigation/navigationRef', () => ({
 jest.mock('@components/Icon/Expensicons');
 
 jest.mock('@react-navigation/native');
+jest.mock('@src/hooks/useLHNEstimatedListSize/index.native.ts');
 
 const getMockedReportsMap = (length = 100) => {
     const mockReports = Object.fromEntries(