reimplements lazy mount with Activity

Author: leshniak

src/pages/inbox/sidebar/FABPopoverContent/FABPopoverMenu.tsx

@@ -1,5 +1,5 @@
-import React, {useState} from 'react';
-import type {RefObject} from 'react';
+import React, {Activity, useState} from 'react';
+import type {ActivityProps, RefObject} from 'react';
 import {View} from 'react-native';
 import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
 import PopoverWithMeasuredContent from '@components/PopoverWithMeasuredContent';
@@ -40,13 +40,7 @@ function FABPopoverMenu({isVisible, onClose, onItemSelected, anchorRef, animatio
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {windowHeight} = useWindowDimensions();
     const anchorPosition = styles.createMenuPositionSidebar(windowHeight);
-
-    // Keep children mounted during the close animation so the fade-out is visible.
-    // Mount when isVisible becomes true; unmount only after the modal hide animation completes.
-    const [shouldRenderChildren, setShouldRenderChildren] = useState(isVisible);
-    if (isVisible && !shouldRenderChildren) {
-        setShouldRenderChildren(true);
-    }
+    const [contentActivityMode, setContentActivityMode] = useState<ActivityProps['mode']>(isVisible ? 'visible' : 'hidden');
 
     const [registeredSet, setRegisteredSet] = useState<ReadonlySet<string>>(new Set());
 
@@ -119,12 +113,13 @@ function FABPopoverMenu({isVisible, onClose, onItemSelected, anchorRef, animatio
                 }}
                 onClose={handleClose}
                 isVisible={isVisible}
+                onModalWillShow={() => setContentActivityMode('visible')}
+                onModalHide={() => setContentActivityMode('hidden')}
                 fromSidebarMediumScreen={!shouldUseNarrowLayout}
                 animationIn="fadeIn"
                 animationOut="fadeOut"
                 animationInTiming={animationInTiming}
                 animationOutTiming={animationOutTiming}
-                onModalHide={() => setShouldRenderChildren(false)}
                 disableAnimation={false}
                 shouldHandleNavigationBack
                 innerContainerStyle={styles.pv0}
@@ -133,9 +128,11 @@ function FABPopoverMenu({isVisible, onClose, onItemSelected, anchorRef, animatio
                     active={isVisible}
                     shouldReturnFocus
                 >
-                    <View style={shouldUseNarrowLayout ? styles.flexGrow1 : [styles.createMenuContainer, styles.pv0, styles.flex1]}>
-                        <View style={styles.pv4}>{shouldRenderChildren ? children : null}</View>
-                    </View>
+                    <Activity mode={contentActivityMode}>
+                        <View style={shouldUseNarrowLayout ? styles.flexGrow1 : [styles.createMenuContainer, styles.pv0, styles.flex1]}>
+                            <View style={styles.pv4}>{children}</View>
+                        </View>
+                    </Activity>
                 </FocusTrapForModal>
             </PopoverWithMeasuredContent>
         </FABMenuContext.Provider>