| 1 | import { useCallback, useContext, useSyncExternalStore } from "react"; |
| 2 | import { UNSAFE_DataRouterContext, useLocation, useNavigation } from "react-router"; |
| 3 | import { sidebarLocation } from "./navigation-owner"; |
| 4 | |
| 5 | /** Keep the navigation chrome on the latest destination, even while React commits a route transition. */ |
| 6 | export function useSidebarLocation() { |
| 7 | const context = useContext(UNSAFE_DataRouterContext); |
| 8 | const location = useLocation(); |
| 9 | const navigation = useNavigation(); |
| 10 | const router = context?.router; |
| 11 | const subscribe = useCallback((notify: () => void) => router?.subscribe(notify) ?? (() => {}), [router]); |
| 12 | const snapshot = useCallback(() => router ? sidebarLocation(router.state) : location, [router, location]); |
| 13 | const serverSnapshot = () => navigation.location ?? location; |
| 14 | return useSyncExternalStore(subscribe, snapshot, serverSnapshot); |
| 15 | } |