Merge branch 'main' into jakubkalinski0/App_stuck_on_E_screen_after_refresh_on_confirm_odometer_page

Author: jakubkalinski0

babel.config.js

@@ -130,6 +130,9 @@ const metro = {
         production: {
             plugins: [['transform-remove-console', {exclude: ['error', 'warn']}]],
         },
+        test: {
+            plugins: ['@babel/plugin-transform-dynamic-import'],
+        },
     },
 };
 

contributingGuides/PERFORMANCE.md

@@ -282,7 +282,7 @@ Since our codebase is very complex, it results in a large DOM tree rendered for
 
 One of the most common issues is related to modals, popovers, and tooltips — elements that may appear on the screen. The problem is that they are usually present in the DOM tree even when initially invisible. Because of this, the initial render time of a screen may increase, ultimately slowing down the app.
 
-The solution is better control of invisible elements, making sure they are not included in the first render. This can be done, e.g., by a simple `return null`, smart usage of `lazy loading`, the `useTransition` hook, or the `<Deferred />` component.
+The solution is better control of invisible elements, making sure they are not included in the first render. This can be done, e.g., by a simple `return null`, smart usage of `lazy loading`, the `useTransition` hook, or the [`<NavigationDeferredMount />`](/src/components/NavigationDeferredMount.tsx) component. `<NavigationDeferredMount />` gates a heavy subtree behind navigation transition completion via `TransitionTracker`, rendering a cheap `placeholder` until the nav animation has finished, then mounting its `children` inside `startTransition` — ideal for heavy subtrees (e.g. report headers, page-level secondary actions) mounted during navigation transitions that pull many `useOnyx` subscriptions or heavy hooks but don't need to be interactive on first render.
 
 Another issue worth mentioning is unnecessary code execution, especially for elements that are never shown on a specific platform. In theory, we separate the logic between platforms by using index.tsx/index.native.tsx files, but sometimes platform-specific logic may slip in, causing unnecessary execution. For example, this may happen when logic specific to a wide layout (applicable only for web) is included.
 
@@ -294,6 +294,7 @@ Examples:
 - [PopoverWithMeasuredContent optimization for mobile](https://github.com/Expensify/App/pull/68223) - returns early to avoid unnecessary calculations
 - [Reduce confirm modal initial render count](https://github.com/Expensify/App/pull/67518) - returns early to reduce first load cost
 - [Do not render PopoverMenu until it gets opened](https://github.com/Expensify/App/pull/67877) - adds a wrapper to control if `PopoverMenu` should be rendered
+- [Defer mount of MoneyReportHeaderSecondaryActions](https://github.com/Expensify/App/pull/88522) - introduces `NavigationDeferredMount` and uses it to defer the "More" dropdown subtree (20+ `useOnyx` subscriptions) until the navigation transition completes
 
 # Proposing Performance Improvements
 

docs/articles/travel/getting-started/Expensify-Travel-Walkthrough.md

@@ -963,6 +963,7 @@ https://help.expensify.com/articles/new-expensify/reports-and-expenses/Delete-Ex
 https://help.expensify.com/articles/new-expensify/reports-and-expenses/Duplicate-Detection,https://help.expensify.com/articles/new-expensify/reports-and-expenses/How-to-Find-and-Resolve-Flagged-Duplicate-Expenses
 https://help.expensify.com/articles/new-expensify/reports-and-expenses/Merging-expenses,https://help.expensify.com/articles/new-expensify/reports-and-expenses/How-to-Merge-Expenses
 https://help.expensify.com/articles/new-expensify/reports-and-expenses/How-to-prevent-duplicate-expenses,https://help.expensify.com/articles/new-expensify/reports-and-expenses/Why-Expenses-Duplicate
+https://help.expensify.com/articles/travel/getting-started/Expensify-Travel-Walkthrough,https://help.expensify.com/travel/hubs/getting-started/
 https://help.expensify.com/articles/new-expensify/connect-credit-cards/Assign-and-Manage-Cards,https://help.expensify.com/articles/new-expensify/connect-credit-cards/Assign-Company-Cards
 https://help.expensify.com/articles/new-expensify/connect-credit-cards/Commercial-feeds,https://help.expensify.com/articles/new-expensify/connect-credit-cards/Set-up-a-Commercial-Card-Feed-Connection
 https://help.expensify.com/articles/new-expensify/connect-credit-cards/Company-Card-Settings,https://help.expensify.com/articles/new-expensify/connect-credit-cards/Configure-Company-Card-Settings

docs/redirects.csv

@@ -1,9 +1,24 @@
 import '@testing-library/react-native';
+import type {KeyboardEventName} from 'react-native';
+import {Keyboard} from 'react-native';
 import Onyx from 'react-native-onyx';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 jest.useRealTimers();
 
+// Patch Keyboard.addListener to return a subscription object with .remove() so that
+// @react-navigation/bottom-tabs useIsKeyboardShown hook doesn't crash on cleanup.
+if (Keyboard && typeof Keyboard.addListener === 'function') {
+    const originalAddListener = Keyboard.addListener.bind(Keyboard);
+    Keyboard.addListener = ((event: KeyboardEventName, callback: () => void) => {
+        const subscription = originalAddListener(event, callback);
+        if (!subscription || typeof subscription.remove !== 'function') {
+            return {remove: jest.fn()};
+        }
+        return subscription;
+    }) as typeof Keyboard.addListener;
+}
+
 // This mock must live in setupAfterEnv (not setupFiles) because @shopify/flash-list/jestSetup,
 // imported in setup.ts, registers its own measureLayout mock. Placing ours here ensures it
 // runs after FlashList's setup and takes precedence.