Merge branch 'main' into @szymczak/revert-revert-Flatten-transaction-item-row-view-hierarchy-to-improve-performance

Author: SzymczakJ

src/components/Navigation/SearchSidebar.tsx

@@ -58,7 +58,7 @@ function SearchSidebar({state}: SearchSidebarProps) {
     }, [lastSearchType, queryJSON, setLastSearchType, currentSearchResults]);
 
     const isDataLoaded = isSearchDataLoaded(currentSearchResults?.data ? currentSearchResults : lastNonEmptySearchResults, queryJSON);
-    const shouldShowLoadingState = route?.name === SCREENS.SEARCH.MONEY_REQUEST_REPORT ? false : !isOffline && !isDataLoaded;
+    const shouldShowLoadingState = route?.name === SCREENS.SEARCH.MONEY_REQUEST_REPORT ? false : !isOffline && (!isDataLoaded || !!currentSearchResults?.search?.isLoading);
 
     if (shouldUseNarrowLayout) {
         return null;

src/components/PushRowWithModal/PushRowModal.tsx

@@ -77,7 +77,7 @@ function PushRowModal({isVisible, selectedOption, onOptionChange, onClose, optio
             type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
             onModalHide={handleClose}
             shouldUseCustomBackdrop
-            useNativeDriver
+            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 includePaddingTop={false}

src/components/TimeModalPicker.tsx

@@ -55,9 +55,8 @@ function TimeModalPicker({value, errorText, label, onInputChange = () => {}}: Ti
                 isVisible={isPickerVisible}
                 onClose={hidePickerModal}
                 onModalHide={hidePickerModal}
-                hideModalContentWhileAnimating
-                useNativeDriver
                 enableEdgeToEdgeBottomSafeAreaPadding
+                shouldUseReanimatedModal
             >
                 <ScreenWrapper
                     style={styles.pb0}

src/components/ValuePicker/ValueSelectorModal.tsx

@@ -23,11 +23,10 @@ function ValueSelectorModal({
             isVisible={isVisible}
             onClose={() => onClose?.()}
             onModalHide={onClose}
-            hideModalContentWhileAnimating
-            useNativeDriver
             onBackdropPress={onBackdropPress}
             shouldHandleNavigationBack
             enableEdgeToEdgeBottomSafeAreaPadding
+            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 includePaddingTop={false}

src/libs/actions/OnyxDerived/configs/reportAttributes.ts

@@ -1,7 +1,7 @@
 import {generateIsEmptyReport, generateReportAttributes, generateReportName, isValidReport} from '@libs/ReportUtils';
 import SidebarUtils from '@libs/SidebarUtils';
 import createOnyxDerivedValueConfig from '@userActions/OnyxDerived/createOnyxDerivedValueConfig';
-import hasKeyTriggeredCompute from '@userActions/OnyxDerived/utils';
+import {hasKeyTriggeredCompute} from '@userActions/OnyxDerived/utils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {ReportAttributesDerivedValue} from '@src/types/onyx';

src/libs/actions/OnyxDerived/index.ts

@@ -13,6 +13,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ObjectUtils from '@src/types/utils/ObjectUtils';
 import ONYX_DERIVED_VALUES from './ONYX_DERIVED_VALUES';
 import type {DerivedValueContext} from './types';
+import {setDerivedValue} from './utils';
 
 /**
  * Initialize all Onyx derived values, store them in Onyx, and setup listeners to update them when dependencies change.
@@ -42,7 +43,7 @@ function init() {
                     // @ts-expect-error TypeScript can't confirm the shape of dependencyValues matches the compute function's parameters
                     derivedValue = compute(dependencyValues, initialContext);
                     dependencyValues = values;
-                    Onyx.set(key, derivedValue ?? null);
+                    setDerivedValue(key, derivedValue ?? null);
                 });
             }
 
@@ -84,7 +85,7 @@ function init() {
                 const newDerivedValue = compute(dependencyValues, context);
                 Log.info(`[OnyxDerived] updating value for ${key} in Onyx`);
                 derivedValue = newDerivedValue;
-                Onyx.set(key, derivedValue ?? null);
+                setDerivedValue(key, derivedValue);
             };
 
             for (let i = 0; i < dependencies.length; i++) {

src/libs/actions/OnyxDerived/utils.ts

@@ -1,5 +1,7 @@
+import Onyx from 'react-native-onyx';
+import type {OnyxInput} from 'react-native-onyx';
 import type {NonEmptyTuple} from 'type-fest';
-import type {OnyxKey} from '@src/ONYXKEYS';
+import type {OnyxDerivedKey, OnyxKey} from '@src/ONYXKEYS';
 import type {DerivedValueContext} from './types';
 
 /**
@@ -12,4 +14,16 @@ const hasKeyTriggeredCompute = <K extends OnyxKey, Deps extends NonEmptyTuple<Ex
     return Object.keys(sourceValues).some((sourceKey) => sourceKey === key);
 };
 
-export default hasKeyTriggeredCompute;
+/**
+ * Set a derived value in Onyx
+ * As a performance optimization, it skips the cache check and null removal
+ * For derived values, we fully control their lifecycle and recompute them when any dependency changes - so we don’t need a deep comparison
+ * Also, null may be a legitimate result of the computation, so pruning it is unnecessary
+ */
+const setDerivedValue = (key: OnyxDerivedKey, value: OnyxInput<OnyxDerivedKey>) =>
+    Onyx.set(key, value, {
+        skipCacheCheck: true,
+        skipNullRemoval: true,
+    });
+
+export {hasKeyTriggeredCompute, setDerivedValue};

src/pages/ScheduleCall/ScheduleCallConfirmationPage.tsx

@@ -1,5 +1,5 @@
 import {useRoute} from '@react-navigation/native';
-import {addMinutes, format} from 'date-fns';
+import {addMinutes} from 'date-fns';
 import React, {useCallback, useMemo} from 'react';
 import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
 import Button from '@components/Button';
@@ -71,7 +71,7 @@ function ScheduleCallConfirmationPage() {
         if (!scheduleCallDraft?.timeSlot || !scheduleCallDraft.date) {
             return '';
         }
-        const dateString = format(scheduleCallDraft.date, CONST.DATE.MONTH_DAY_YEAR_FORMAT);
+        const dateString = DateUtils.formatInTimeZoneWithFallback(scheduleCallDraft.date, userTimezone, CONST.DATE.MONTH_DAY_YEAR_FORMAT);
         const timeString = `${DateUtils.formatInTimeZoneWithFallback(scheduleCallDraft?.timeSlot, userTimezone, CONST.DATE.LOCAL_TIME_FORMAT)} - ${DateUtils.formatInTimeZoneWithFallback(
             addMinutes(scheduleCallDraft?.timeSlot, 30),
             userTimezone,

src/pages/ScheduleCall/ScheduleCallPage.tsx

@@ -1,5 +1,5 @@
 import {useFocusEffect, useRoute} from '@react-navigation/native';
-import {compareAsc, format, parse} from 'date-fns';
+import {compareAsc, parse} from 'date-fns';
 import React, {useCallback, useEffect, useMemo} from 'react';
 import {View} from 'react-native';
 import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
@@ -187,7 +187,9 @@ function ScheduleCallPage() {
                             <View style={[styles.ph5, styles.mb5]}>
                                 <Text style={[styles.mb5, styles.colorMuted]}>
                                     {translate('scheduledCall.book.slots')}
-                                    <Text style={[styles.textStrong, styles.colorMuted]}>{format(scheduleCallDraft.date, CONST.DATE.MONTH_DAY_YEAR_FORMAT)}</Text>
+                                    <Text style={[styles.textStrong, styles.colorMuted]}>
+                                        {DateUtils.formatInTimeZoneWithFallback(scheduleCallDraft.date, userTimezone, CONST.DATE.MONTH_DAY_YEAR_FORMAT)}
+                                    </Text>
                                 </Text>
                                 <View style={[styles.flexRow, styles.flexWrap, styles.justifyContentStart, styles.gap2]}>
                                     {timeSlotsForSelectedData.map((timeSlot: TimeSlot) => (

src/pages/Search/SearchPageNarrow.tsx

@@ -17,6 +17,7 @@ import type {SearchParams, SearchQueryJSON} from '@components/Search/types';
 import useHandleBackButton from '@hooks/useHandleBackButton';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useScrollEventEmitter from '@hooks/useScrollEventEmitter';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -29,6 +30,8 @@ import {isSearchDataLoaded} from '@libs/SearchUIUtils';
 import variables from '@styles/variables';
 import {searchInServer} from '@userActions/Report';
 import {search} from '@userActions/Search';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {SearchResults} from '@src/types/onyx';
 
@@ -52,7 +55,8 @@ function SearchPageNarrow({queryJSON, headerButtonsOptions, searchResults, isMob
     const {clearSelectedTransactions} = useSearchContext();
     const [searchRouterListVisible, setSearchRouterListVisible] = useState(false);
     const {isOffline} = useNetwork();
-
+    const currentSearchResultsKey = queryJSON?.hash ?? CONST.DEFAULT_NUMBER_ID;
+    const [currentSearchResults] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${currentSearchResultsKey}`, {canBeMissing: true});
     // Controls the visibility of the educational tooltip based on user scrolling.
     // Hides the tooltip when the user is scrolling and displays it once scrolling stops.
     const triggerScrollEvent = useScrollEventEmitter();
@@ -136,7 +140,7 @@ function SearchPageNarrow({queryJSON, headerButtonsOptions, searchResults, isMob
     }
 
     const isDataLoaded = isSearchDataLoaded(searchResults, queryJSON);
-    const shouldShowLoadingState = !isOffline && !isDataLoaded;
+    const shouldShowLoadingState = !isOffline && (!isDataLoaded || !!currentSearchResults?.search?.isLoading);
 
     return (
         <ScreenWrapper