#community-help

Managing Loading State in Typesense Using Nuxt.js

TLDR Nasim needed advice on implementing a loading state during the Typesense loading process in Nuxt.js. Jason initially suggested using vue-instantsearch, but Nasim found a solution by using a temporary variable to toggle the loading state.

Powered by Struct AI

2

Aug 18, 2022 (16 months ago)
Nasim
Photo of md5-46b59943e82de807cdb3cc937f78183a
Nasim
05:00 AM
As you can see in the video when typesense first loads there is an empty screen present and we want to get rid of that state and show a loading state there. Is there any way to know when the typesense is loading?
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
05:22 AM
Are you using instantsearch by any chance?
05:23
Jason
05:23 AM
If so, here’s how to show loading state: https://github.com/algolia/instantsearch.js/issues/1623
Nasim
Photo of md5-46b59943e82de807cdb3cc937f78183a
Nasim
05:24 AM
I am using <ais-instance-search> in nuxt.js
Nasim
Photo of md5-46b59943e82de807cdb3cc937f78183a
Nasim
05:30 AM
Not sure if I have conveyed my message correctly. I already have a loading indicator when the page is searching. But I am trying to get the state when typesense is loading.
05:33
Nasim
05:33 AM
Never mind, I found a solution.
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
05:33 AM
From Typesense’s perspective, the very first query is also a search, just like any other search…

1

05:33
Jason
05:33 AM
Oh nice, what was the solution?
Nasim
Photo of md5-46b59943e82de807cdb3cc937f78183a
Nasim
05:35 AM
yeah. I took a temporary variable named firstSearchDone and initially it’s value is false and then I listen to search middleware and see if a search has been completed. If it’s completed then I change the value to true. Based on this value, I toggle the loading state.

1