use new router for transitions

supabase · May 3, 2024 · 45ecd1e · 45ecd1e
1 parent 64b1b5f
commit 45ecd1e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 38 deletions.
diff --git a/packages/ui-patterns/CommandMenu/api/CommandProvider.tsx b/packages/ui-patterns/CommandMenu/api/CommandProvider.tsx
@@ -2,18 +2,12 @@ import { type PropsWithChildren, useEffect, useMemo } from 'react'
 
 import { useConstant } from 'common'
 
-import {
-  useIsCommandNavigating,
-  useSetCommandMenuVisible,
-  useSetIsCommandNavigating,
-  useToggleCommandMenu,
-} from './hooks/viewHooks'
+import { useToggleCommandMenu } from './hooks/viewHooks'
 import { CommandContext } from '../internal/Context'
 import { initCommandsState } from '../internal/state/commandsState'
 import { initPagesState } from '../internal/state/pagesState'
 import { initViewState } from '../internal/state/viewState'
 import { initQueryState } from '../internal/state/queryState'
-import { useRouter } from 'next/router'
 
 const CommandProviderInternal = ({ children }: PropsWithChildren) => {
   const commandsState = useConstant(initCommandsState)
@@ -36,19 +30,6 @@ const CommandProviderInternal = ({ children }: PropsWithChildren) => {
 
 const CommandShortcut = () => {
   const toggleOpen = useToggleCommandMenu()
-  const setIsOpen = useSetCommandMenuVisible()
-  const setIsNavigating = useSetIsCommandNavigating()
-  const isNavigating = useIsCommandNavigating()
-  const router = useRouter()
-
-  useEffect(() => {
-    router.events.on('routeChangeComplete', () => {
-      if (isNavigating) {
-        setIsNavigating(false)
-        setIsOpen(false)
-      }
-    })
-  }, [router])
 
   useEffect(() => {
     const handleKeydown = (evt: KeyboardEvent) => {

diff --git a/packages/ui-patterns/CommandMenu/api/hooks/viewHooks.ts b/packages/ui-patterns/CommandMenu/api/hooks/viewHooks.ts
@@ -28,18 +28,6 @@ const useToggleCommandMenu = () => {
   return toggleOpen
 }
 
-const useIsCommandNavigating = () => {
-  const { viewState } = useCommandContext()
-  const { isNavigating } = useSnapshot(viewState)
-  return isNavigating
-}
-
-const useSetIsCommandNavigating = () => {
-  const { viewState } = useCommandContext()
-  const { setIsNavigating } = useSnapshot(viewState)
-  return setIsNavigating
-}
-
 const useCommandMenuSize = () => {
   const { viewState } = useCommandContext()
   const { size } = useSnapshot(viewState)
@@ -63,8 +51,6 @@ export {
   useCommandMenuVisible,
   useSetCommandMenuVisible,
   useToggleCommandMenu,
-  useIsCommandNavigating,
-  useSetIsCommandNavigating,
   useCommandMenuSize,
   useSetCommandMenuSize,
 }
diff --git a/packages/ui-patterns/CommandMenu/internal/Command.tsx b/packages/ui-patterns/CommandMenu/internal/Command.tsx
@@ -1,8 +1,15 @@
 import { useRouter } from 'next/navigation'
-import { type PropsWithChildren, type ReactNode, forwardRef } from 'react'
+import {
+  type PropsWithChildren,
+  type ReactNode,
+  forwardRef,
+  useEffect,
+  useRef,
+  useTransition,
+} from 'react'
 
 import { CommandItem_Shadcn_, cn } from 'ui'
-import { useSetCommandMenuVisible, useSetIsCommandNavigating } from '../api/hooks/viewHooks'
+import { useSetCommandMenuVisible } from '../api/hooks/viewHooks'
 
 type ICommand = IActionCommand | IRouteCommand
 
@@ -81,9 +88,18 @@ const CommandItem = forwardRef<
   PropsWithChildren<CommandItemProps>
 >(({ children, className, command: _command, ...props }, ref) => {
   const router = useRouter()
-  const setIsNavigating = useSetIsCommandNavigating()
+  const [isPending, startTransition] = useTransition()
+  const prevIsPending = useRef(isPending)
   const setIsOpen = useSetCommandMenuVisible()
 
+  useEffect(() => {
+    if (prevIsPending.current && !isPending) {
+      // Router transition just finished
+      setIsOpen(false)
+    }
+    prevIsPending.current = isPending
+  }, [isPending])
+
   const command = _command as ICommand // strip the readonly applied from the proxy
 
   return (
@@ -97,7 +113,7 @@ const CommandItem = forwardRef<
             ? () => {
                 command.route.startsWith('http')
                   ? (window.open(command.route, '_blank', 'noreferrer,noopener'), setIsOpen(false))
-                  : (router.push(command.route), setIsNavigating(true))
+                  : startTransition(() => router.push(command.route))
               }
             : () => {}
       }