diff --git a/src/components/CommandKClient.tsx b/src/components/CommandKClient.tsx index 3a218901..0e99bc09 100644 --- a/src/components/CommandKClient.tsx +++ b/src/components/CommandKClient.tsx @@ -1,7 +1,14 @@ 'use client'; import { Command } from 'cmdk'; -import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'; +import { + ReactNode, + useEffect, + useMemo, + useRef, + useState, + useTransition, +} from 'react'; import Modal from './Modal'; import { clsx } from 'clsx/lite'; import { useDebounce } from 'use-debounce'; @@ -44,6 +51,16 @@ export default function CommandKClient({ } = useAppState(); const isOpenRef = useRef(isOpen); + + const [isPending, startTransition] = useTransition(); + const shouldCloseAfterPending = useRef(false); + + useEffect(() => { + if (!isPending && shouldCloseAfterPending.current) { + setIsOpen?.(false); + shouldCloseAfterPending.current = false; + } + }, [isPending, setIsOpen]); // Raw query values const [queryLiveRaw, setQueryLive] = useState(''); @@ -149,7 +166,7 @@ export default function CommandKClient({ onClose={() => setIsOpen?.(false)} fast > -
+
setQueryLive(e.currentTarget.value)} @@ -163,6 +180,7 @@ export default function CommandKClient({ 'placeholder:dark:text-gray-700', )} placeholder="Search photos, views, settings ..." + disabled={isPending} /> {isLoading && { - setIsOpen?.(false); - action?.(); if (path) { - router.push(path); + startTransition(() => { + shouldCloseAfterPending.current = true; + router.push(path, { scroll: true }); + }); + } else { + setIsOpen?.(false); + action?.(); } }} >