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.

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

Empty and Loading state being rendered at the same time #269

Open
mbagatini opened this issue May 27, 2024 · 3 comments
Open

Empty and Loading state being rendered at the same time #269

mbagatini opened this issue May 27, 2024 · 3 comments

Comments

@mbagatini
Copy link

I'm facing a problem when working with asyn request options list and search operation. For some reason I could not understand yet, when the records are being fetched, cmdk show both Empty and Loading component at the same time (image below).

Is it a bug or am I doing something wrong?

export const Search = () => {
  const [open, setOpen] = React.useState(false)
  const [search, setSearch] = React.useState('')

  const { data: results, isLoading } = useQuery(
    ['docs', search],
    async (context) => {
      const client = new MeiliSearch({
        host: 'http://127.0.0.1:7700',
        apiKey: 'myMasterKey'
      })
      // An index is where the documents are stored.
      const index = client.index('movies')

      const queryResults = await index.search(context.queryKey[1], { limit: 5 })
      return queryResults
    }
  )

  return (
    <>
      <button onClick={() => setOpen(true)}>
        Search docs
      </button>
      <Command.Dialog
        shouldFilter={false}
        open={open}
        onOpenChange={setOpen}
        label="Global Command Menu"
      >
        <Command.Input
          value={search}
          onValueChange={setSearch}
        />

        <Command.List>
          {isLoading && <Command.Loading>Carregando…</Command.Loading>}
          {results?.hits.map((hit) => (
            <Command.Item key={hit.id} value={hit.title}>
              <h4>{hit.title}</h4>
              <span>{hit.overview}</span>
            </Command.Item>
          ))}

          <Command.Empty>Nenhuma opção disponível</Command.Empty>
        </Command.List>
      </Command.Dialog>
    </>
  )
}

Waiting request to resolve:

Captura de tela de 2024-05-27 14-12-07

@matusca96
Copy link

did you try to move the Command.Empty to outside the Command.List?

@mbagatini
Copy link
Author

@matusca96 yes I tried, but the behaviour didn't change. For now, I had to make this change in order to work properly:

       <Command.List>
         {isLoading && <Command.Loading>Carregando…</Command.Loading>}
         {results?.hits.map((hit) => (
           <Command.Item key={hit.id} value={hit.title}>
             <h4>{hit.title}</h4>
             <span>{hit.overview}</span>
           </Command.Item>
         ))}

          {isLoading ? (
               <Command.Empty />
           ) : (
               <Command.Empty>Nenhuma opção disponível</Command.Empty>
           )}

       </Command.List>

@hungtcs
Copy link

hungtcs commented Sep 19, 2024

same issues, loading and empty should be mutually exclusive, but now it has to be managed manually.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants