UseQuery loading spinner showing right away! :(

const [search, setSearch] = useState();

const { isLoading, isSuccess } = useQuery({
  queryKey: ["xQuery", search],
  ...
})

return (
  <>
    {!search && firstInput
    {search && secondInput}
    <button />
  </>
)

const [search, setSearch] = useState();

const { isLoading, isSuccess } = useQuery({
  queryKey: ["xQuery", search],
  ...
})

return (
  <>
    {!search && firstInput
    {search && secondInput}
    <button />
  </>
)

// dialog.tsx

// ensure dialog clears your component state when it closes, if it doesn't unmount your component when it is closed, you can manually do this with a key which will reset component state
<Dialog isOpen={isOpen} onClose={onClose}>
  <MyDialog key={String(isOpen)} />
</Dialog>

// dialog.tsx

// ensure dialog clears your component state when it closes, if it doesn't unmount your component when it is closed, you can manually do this with a key which will reset component state
<Dialog isOpen={isOpen} onClose={onClose}>
  <MyDialog key={String(isOpen)} />
</Dialog>

// myDialog.tsx
const MyDialog = () => {
  // store the search term (pre-search) and filter (post search) values for the input. you can use hasSearch to determine which state you are in, and make a discriminated union in typescript if you want to be really type safe
  const [state, setState] = useState({
    searchTerm: "",
    hasSearched: false,
    filter: null
  });

  // query will only run when you have searched, and then your searchTerm isn't going to change again so will be fine
  const { isSuccess, data } = useQuery({
    queryKey: ["my-query", state.searchTerm],
    queryFn: () => ...,
    enabled: !!state.hasSearched,
    // use your filter value from the input after search to filter down the results locally. could consider useCallback if this function is expensive
    select: (data) => customFilterBasedOnUserInput(data, state.filter)
  })

  // pass `onChange` to the correct state based on the component searched state
  const handleOnChange = (e) => {
    if (state.hasSearched) {
      setState((s) => ({ ...s, filter: e.target.value }))
    } else {
      setState((s) => ({ ...s, searchTerm: e.target.value }))
    }
  }

  // we should just need to change whether or not we have searched at this point (more to next state of this component)
  const onClick = () => {
    setState((s) => ({ ...s, hasSearched: true }); 
  }

  return (
    <>
      // key will change when your hasSearched changes. 
      <input key={String(state.hasSearched)} onChange={onChange} />
      <button onClick={onClick}>search</button>
    </>
  );
}

// myDialog.tsx
const MyDialog = () => {
  // store the search term (pre-search) and filter (post search) values for the input. you can use hasSearch to determine which state you are in, and make a discriminated union in typescript if you want to be really type safe
  const [state, setState] = useState({
    searchTerm: "",
    hasSearched: false,
    filter: null
  });

  // query will only run when you have searched, and then your searchTerm isn't going to change again so will be fine
  const { isSuccess, data } = useQuery({
    queryKey: ["my-query", state.searchTerm],
    queryFn: () => ...,
    enabled: !!state.hasSearched,
    // use your filter value from the input after search to filter down the results locally. could consider useCallback if this function is expensive
    select: (data) => customFilterBasedOnUserInput(data, state.filter)
  })

  // pass `onChange` to the correct state based on the component searched state
  const handleOnChange = (e) => {
    if (state.hasSearched) {
      setState((s) => ({ ...s, filter: e.target.value }))
    } else {
      setState((s) => ({ ...s, searchTerm: e.target.value }))
    }
  }

  // we should just need to change whether or not we have searched at this point (more to next state of this component)
  const onClick = () => {
    setState((s) => ({ ...s, hasSearched: true }); 
  }

  return (
    <>
      // key will change when your hasSearched changes. 
      <input key={String(state.hasSearched)} onChange={onChange} />
      <button onClick={onClick}>search</button>
    </>
  );
}

{state.hasSearched && data?.map(...)}

{state.hasSearched && data?.map(...)}