Search current state using loading ref

[roberto910907]

Is it possible to implement an extra option when destructuring the composable to get the search current state?

const { result, search, loading } = useMeiliSearch('my_index');

That way, loading ref can be used to have some "in progress" loader.

Something similar to the loading boolean ref here: https://v4.apollo.vuejs.org/api/use-query.html#return

[roberto910907]

Perhaps we can create a loading ref inside the composables and update its value before and after the awaits call, for example, this one: https://github.com/xlanex6/nuxt-meilisearch/blob/master/src/runtime/composables/useMeiliSearch.ts#L13

  const loading = ref(false)
  const client = useMeiliSearchRef()
  const result = useState(`${index}-search-result`, () => null as SearchResponse | null)

  const search = async (query: string, searchParams?: SearchParams) => {
    loading.value = true;

    const resp = await client.index(index).search(query, searchParams)

    loading.value = false;    

    result.value = resp as SearchResponse

    return resp
  }

  return {
    search,
    result,
    loading,
  }

We can also return an error ref and add a try-catch around the await call.

[xlanex6]

Hi @roberto910907

It looks great!

Can you please push it into a pull request? As it's an open-source project, you're more than welcome to contribute to it.

[roberto910907]

@xlanex6 Absolutely! Just wanted to validate my idea and your willingness to accept these changes before spending time on implementing the feature. I will implement the changes and possibly open the PR before the end of the day. Thanks!

[xlanex6]

@roberto910907 Let me knows if I can help with this feature