I’m a beginner in react native and looking to make a searchbar like Instagram(when you search a skeleton will be displayed during typing). I’m using the skeleton from Moti.

When a user types really fast, I don’t want to make a new api request for every new letter. That’s why I set a timer that checks if a new letter has been added in the last 300 miliseconds. This works great for when I don’t enable the skeleton during typing.

I would be really thankful if someone could help me make my search bar perform correctly. I’ve added my GitHub repo containing two tabs. The first one uses the Moti skeleton, which you will notice performs really poorly. The second one performs normal, but without the skeleton. Also I added the videos so you can see it performs pourly and also incorrect.

My problem is that for some reason the performance is really bad when using the moti skeleton. I personally think that is has to do with the skeleton needing to rerender and then the timer will not be cleared correctly for some reason. Like it will now make an api request for every letter and the whole list will rerender for every new letter.

This makes the search Bar really laggy and also incorrect. See the video, when no input is entered ‘recent searches’ should popup but instead the latest API request is displayed (which should’ve been cleared).

https://github.com/MrGainn/MyApp.git