use new freeze wrapper

software-mansion-labs · Nov 8, 2024 · dab0ad4 · dab0ad4
1 parent c52cbaa
commit dab0ad4
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 82 deletions.
diff --git a/src/libs/Navigation/AppNavigator/Navigators/ReportsSplitNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/ReportsSplitNavigator.tsx
@@ -1,42 +1,19 @@
-import {useNavigationState, useRoute} from '@react-navigation/native';
 import React, {useRef} from 'react';
-import {Freeze} from 'react-freeze';
 import FocusTrapForScreens from '@components/FocusTrap/FocusTrapForScreen';
 import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import usePermissions from '@hooks/usePermissions';
-import memoize from '@libs/memoize';
 import createSplitStackNavigator from '@libs/Navigation/AppNavigator/createSplitStackNavigator';
+import FreezeWrapper from '@libs/Navigation/AppNavigator/FreezeWrapper';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
 import shouldOpenOnAdminRoom from '@libs/Navigation/shouldOpenOnAdminRoom';
 import type {ReportsSplitNavigatorParamList} from '@libs/Navigation/types';
-import {isFullScreenName} from '@libs/NavigationUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 import SCREENS from '@src/SCREENS';
 import type ReactComponentModule from '@src/types/utils/ReactComponentModule';
 
-function FrozenScreen<TProps extends React.JSX.IntrinsicAttributes>(WrappedComponent: React.ComponentType<TProps>, freeze: boolean) {
-    return (props: TProps) => (
-        <Freeze freeze={freeze}>
-            <WrappedComponent
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...props}
-            />
-        </Freeze>
-    );
-}
-
-function freezeScreenWithLazyLoading(lazyComponent: () => React.ComponentType, freeze: boolean) {
-    return memoize(
-        () => {
-            const Component = lazyComponent();
-            return FrozenScreen(Component, freeze);
-        },
-        {monitoringName: 'freezeScreenWithLazyLoading'},
-    );
-}
-
 const loadReportScreen = () => require<ReactComponentModule>('../../../../pages/home/ReportScreen').default;
+const loadSidebarScreen = () => require<ReactComponentModule>('@pages/home/sidebar/SidebarScreen').default;
 
 const Stack = createSplitStackNavigator<ReportsSplitNavigatorParamList>();
 
@@ -47,8 +24,8 @@ function ReportsSplitNavigator() {
     let initialReportID: string | undefined;
     const isInitialRender = useRef(true);
 
-    const currentRoute = useRoute();
-
+    // TODO: Figure out if compiler affects this code.
+    // eslint-disable-next-line react-compiler/react-compiler
     if (isInitialRender.current) {
         const currentURL = getCurrentUrl();
         if (currentURL) {
@@ -60,26 +37,20 @@ function ReportsSplitNavigator() {
             initialReportID = initialReport?.reportID ?? '';
         }
 
+        // eslint-disable-next-line react-compiler/react-compiler
         isInitialRender.current = false;
     }
 
-    const shouldFreeze = useNavigationState((state) => {
-        const lastFullScreenRoute = state.routes.findLast((route) => isFullScreenName(route.name));
-        return lastFullScreenRoute?.key !== currentRoute.key;
-    });
-
-    const getSidebarScreen = freezeScreenWithLazyLoading(() => require<ReactComponentModule>('@pages/home/sidebar/SidebarScreen').default, shouldFreeze);
-
     return (
-        <Freeze freeze={shouldFreeze}>
+        <FreezeWrapper>
             <FocusTrapForScreens>
                 <Stack.Navigator
                     sidebarScreen={SCREENS.HOME}
                     defaultCentralScreen={SCREENS.REPORT}
                 >
                     <Stack.Screen
                         name={SCREENS.HOME}
-                        getComponent={getSidebarScreen}
+                        getComponent={loadSidebarScreen}
                     />
                     <Stack.Screen
                         name={SCREENS.REPORT}
@@ -88,7 +59,7 @@ function ReportsSplitNavigator() {
                     />
                 </Stack.Navigator>
             </FocusTrapForScreens>
-        </Freeze>
+        </FreezeWrapper>
     );
 }
 

diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx
@@ -15,6 +15,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
 import BottomTabBar from '@libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar';
 import TopBar from '@libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar';
+import FreezeWrapper from '@libs/Navigation/AppNavigator/FreezeWrapper';
 import Navigation from '@libs/Navigation/Navigation';
 import type {AuthScreensParamList} from '@libs/Navigation/types';
 import * as SearchQueryUtils from '@libs/SearchQueryUtils';
@@ -58,54 +59,56 @@ function SearchPage({route}: SearchPageProps) {
     }
 
     return (
-        <FullPageNotFoundView
-            shouldForceFullScreen
-            shouldShow={!queryJSON}
-            onBackButtonPress={handleOnBackButtonPress}
-            shouldShowLink={false}
-        >
-            {!!queryJSON && (
-                <View style={styles.searchSplitContainer}>
-                    <View style={styles.searchSidebar}>
-                        {/* {!selectionMode?.isEnabled && queryJSON ? ( */}
-                        {queryJSON ? (
-                            <View>
-                                <TopBar
-                                    activeWorkspaceID={policyID}
-                                    breadcrumbLabel={translate('common.search')}
-                                    shouldDisplaySearch={false}
+        <FreezeWrapper>
+            <FullPageNotFoundView
+                shouldForceFullScreen
+                shouldShow={!queryJSON}
+                onBackButtonPress={handleOnBackButtonPress}
+                shouldShowLink={false}
+            >
+                {!!queryJSON && (
+                    <View style={styles.searchSplitContainer}>
+                        <View style={styles.searchSidebar}>
+                            {/* {!selectionMode?.isEnabled && queryJSON ? ( */}
+                            {queryJSON ? (
+                                <View>
+                                    <TopBar
+                                        activeWorkspaceID={policyID}
+                                        breadcrumbLabel={translate('common.search')}
+                                        shouldDisplaySearch={false}
+                                    />
+                                    <SearchTypeMenu
+                                        queryJSON={queryJSON}
+                                        searchName={searchName}
+                                    />
+                                </View>
+                            ) : (
+                                <HeaderWithBackButton
+                                    title={translate('common.selectMultiple')}
+                                    onBackButtonPress={() => {
+                                        clearSelectedTransactions();
+                                        turnOffMobileSelectionMode();
+                                    }}
                                 />
-                                <SearchTypeMenu
-                                    queryJSON={queryJSON}
-                                    searchName={searchName}
-                                />
-                            </View>
-                        ) : (
-                            <HeaderWithBackButton
-                                title={translate('common.selectMultiple')}
-                                onBackButtonPress={() => {
-                                    clearSelectedTransactions();
-                                    turnOffMobileSelectionMode();
-                                }}
+                            )}
+                            <BottomTabBar selectedTab={SCREENS.SEARCH.CENTRAL_PANE} />
+                        </View>
+                        <ScreenWrapper
+                            testID={Search.displayName}
+                            shouldShowOfflineIndicatorInWideScreen
+                            offlineIndicatorStyle={styles.mtAuto}
+                        >
+                            <SearchPageHeader
+                                queryJSON={queryJSON}
+                                hash={queryJSON.hash}
                             />
-                        )}
-                        <BottomTabBar selectedTab={SCREENS.SEARCH.CENTRAL_PANE} />
+                            <SearchStatusBar queryJSON={queryJSON} />
+                            <Search queryJSON={queryJSON} />
+                        </ScreenWrapper>
                     </View>
-                    <ScreenWrapper
-                        testID={Search.displayName}
-                        shouldShowOfflineIndicatorInWideScreen
-                        offlineIndicatorStyle={styles.mtAuto}
-                    >
-                        <SearchPageHeader
-                            queryJSON={queryJSON}
-                            hash={queryJSON.hash}
-                        />
-                        <SearchStatusBar queryJSON={queryJSON} />
-                        <Search queryJSON={queryJSON} />
-                    </ScreenWrapper>
-                </View>
-            )}
-        </FullPageNotFoundView>
+                )}
+            </FullPageNotFoundView>
+        </FreezeWrapper>
     );
 }