Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(navigation): resolve performance issue #1092

Merged
merged 7 commits into from
Feb 26, 2025
Merged

fix(navigation): resolve performance issue #1092

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4c13762
fix: delay dom mutation until after transition
hgray-instawork Feb 21, 2025
012309b
chore: no delay for external callbacks
hgray-instawork Feb 21, 2025
df78fc1
Merge branch 'master' into hardin/navigation-performance
hgray-instawork Feb 26, 2025
60321cf
chore: define experiment
hgray-instawork Feb 26, 2025
9378e2c
chore: expose experimental features
hgray-instawork Feb 26, 2025
c3b2b04
chore: expose event type
hgray-instawork Feb 26, 2025
35499d9
chore: use experiment to set timeout
hgray-instawork Feb 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 31 additions & 22 deletions src/core/components/hv-route/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -563,26 +563,32 @@ function HvRouteFC(props: Types.Props) {
const id = props.route?.params?.id || props.route?.key;
if (nav) {
const unsubscribeBlur: () => void = nav.addListener('blur', () => {
if (navigationContext.onRouteBlur && props.route) {
navigationContext.onRouteBlur(props.route);
}
// The timeout ensures the processing occurs after the screen is removed or hidden
setTimeout(() => {
if (navigationContext.onRouteBlur && props.route) {
navigationContext.onRouteBlur(props.route);
}
}, 100);
});

// Use the focus event to set the selected route
const unsubscribeFocus: () => void = nav.addListener('focus', () => {
const doc = docContext?.getDoc();
NavigatorService.setSelected(doc, id, docContext?.setDoc);
NavigatorService.addStackRoute(
doc,
id,
props.route,
nav.getState().routes[0]?.name,
navigationContext.entrypointUrl,
docContext?.setDoc,
);
if (navigationContext.onRouteFocus && props.route) {
navigationContext.onRouteFocus(props.route);
}
// The timeout ensures the processing occurs after the screen is rendered or shown
setTimeout(() => {
const doc = docContext?.getDoc();
NavigatorService.setSelected(doc, id, docContext?.setDoc);
NavigatorService.addStackRoute(
doc,
id,
props.route,
nav.getState().routes[0]?.name,
navigationContext.entrypointUrl,
docContext?.setDoc,
);
if (navigationContext.onRouteFocus && props.route) {
navigationContext.onRouteFocus(props.route);
}
}, 100);
});

// Use the beforeRemove event to remove the route from the stack
Expand Down Expand Up @@ -621,12 +627,15 @@ function HvRouteFC(props: Types.Props) {

// Update the urls in each route when the state updates the params
const unsubscribeState: () => void = nav.addListener('state', event => {
NavigatorService.updateRouteUrlFromState(
docContext?.getDoc(),
id,
event.data?.state,
docContext?.setDoc,
);
// The timeout ensures the processing occurs after the screen is rendered or shown
setTimeout(() => {
NavigatorService.updateRouteUrlFromState(
docContext?.getDoc(),
id,
event.data?.state,
docContext?.setDoc,
);
}, 100);
});

return () => {
Expand Down