Vue - Lag Typing (Meili Search) about vue-instantsearch

[turzaizsolt]

We are experiencing the same issue. Did you manage to find a solution?

[nasimuddin01]

Facing the same issue in my app too. Any solution you guys managed to find?

[ymc-sise]

I am facing the same issue.

See movie here:

Bildschirmaufnahme.2022-06-22.um.12.07.36.mov

It happens even if I use the most basic setup (Vue3, no AlpineJS, no TailwindCSS, no jQuery, etc.):

<template>
  <AisInstantSearch
      :index-name="indexName"
      :search-client="searchClient"
  >
    <AisSearchBox />
  </AisInstantSearch>
</template>

But I have to say that I use a typesense search adapter and the response to the server takes around 200ms. When I type a new letter, the letter stays for this 200ms. When the response from typesense is back, in that short moment when the Vue model is updating, the letter is removed and added again.

When I use exactly the same DebouncedSearchBox component from here https://codesandbox.io/s/ms-vue3-is-0293zk?file=/src/App.vue:900-927 with a 10ms delay, then the flickering is gone.

    <AisInstantSearch :index-name="indexName" :search-client="searchClient">
            <DebouncedSearchBox delay="10" />
     </AisInstantSearch>

In my opinion, there is some problem in the $emit here https://github.com/algolia/vue-instantsearch/blob/master/src/components/SearchInput.vue#L27 or with the modelValue here https://github.com/algolia/vue-instantsearch/blob/master/src/components/SearchBox.vue#L156

But its just a best guess.

Please fix it.

[ymc-sise]

Update: I don't think it has something to do with debouncing as mentioned here https://www.algolia.com/doc/ui-libraries/autocomplete/integrations/with-vue-instantsearch/#debouncing-search-results

It happens as well when typing very slowly:

Bildschirmaufnahme.2022-06-22.um.13.06.59.mov

And as written before, it also happens on a plain site with the default vue-instantsearch components and without Tailwind or Alpine or anything else. Unfortunately I can't test it without a typesense server.

I think the component is re-rendered unnecessary when the model value is updated.

[ymc-sise]

Thanks a lot. Your fix works for me.