Skip to content

Commit ad3bf2d

Browse files
leshniakclaude
andcommitted
fix: preserve fade-out animation during lazy unmount
Keep children mounted during the close animation by deferring unmount to onModalHide instead of gating on isVisible directly. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent c368fe2 commit ad3bf2d

1 file changed

Lines changed: 9 additions & 1 deletion

File tree

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,13 @@ function FABPopoverMenu({isVisible, onClose, onItemSelected, anchorRef, animatio
4141
const {windowHeight} = useWindowDimensions();
4242
const anchorPosition = styles.createMenuPositionSidebar(windowHeight);
4343

44+
// Keep children mounted during the close animation so the fade-out is visible.
45+
// Mount when isVisible becomes true; unmount only after the modal hide animation completes.
46+
const [shouldRenderChildren, setShouldRenderChildren] = useState(isVisible);
47+
if (isVisible && !shouldRenderChildren) {
48+
setShouldRenderChildren(true);
49+
}
50+
4451
const [registeredSet, setRegisteredSet] = useState<ReadonlySet<string>>(new Set());
4552

4653
const registeredItems = FAB_ITEM_ORDER.filter((id) => registeredSet.has(id));
@@ -117,6 +124,7 @@ function FABPopoverMenu({isVisible, onClose, onItemSelected, anchorRef, animatio
117124
animationOut="fadeOut"
118125
animationInTiming={animationInTiming}
119126
animationOutTiming={animationOutTiming}
127+
onModalHide={() => setShouldRenderChildren(false)}
120128
disableAnimation={false}
121129
shouldHandleNavigationBack
122130
innerContainerStyle={styles.pv0}
@@ -126,7 +134,7 @@ function FABPopoverMenu({isVisible, onClose, onItemSelected, anchorRef, animatio
126134
shouldReturnFocus
127135
>
128136
<View style={shouldUseNarrowLayout ? styles.flexGrow1 : [styles.createMenuContainer, styles.pv0, styles.flex1]}>
129-
<View style={styles.pv4}>{isVisible ? children : null}</View>
137+
<View style={styles.pv4}>{shouldRenderChildren ? children : null}</View>
130138
</View>
131139
</FocusTrapForModal>
132140
</PopoverWithMeasuredContent>

0 commit comments

Comments
 (0)