fix: reduce flickering

[Ty3uK]

Related to #25.

Search results flickers because of three things (IMO):

• handleInput resets the results array, which immediately dropping list with #if directive in SearchResult component
• Changing styles on focus and blur are not immediate operation, that's why another kind of flickering is a transition between focused and non-focused state (gray background)
• getIcon function is another "bottleneck"; preservation of space for upcomming tag is a key for rescue

Most "ugly" part of this code is manipulating with classes. Changing classes through Svelte's class: binding leads to focus lost.

Unfortunately, manipulating classes through script cannot be made with obfuscated selectors, that's why you can see :global in code. Maybe you know better way to change classes without losing focus.

[Ty3uK]

Also, I can't fully beat icons flickering. When I have some applications in list and I typing another letter or remove old one, icons of apps that already in list flickers because of fully re-render results list.

Maybe we need to use array with ids, or something like that so Svelte can re-render only changed parts (not so familiar with Svelte, but expects similar behaviour with React)

[Ty3uK]

I figured out that non-beated icon flickering is about getIcon function and #await block: Svelte re-renders <img> to a <span> and vice verse almost "blazingly fast", but it leads to annoying blinking 🥲

[Ty3uK]

So I finally beat it with Map as a cache 🙈

https://user-images.githubusercontent.com/2384454/210831582-5cee1db3-5dfa-4ef8-b3f3-3d7ba66e0ce2.mp4

[ParthJadhav]

Woahh, That's amazing man !! It looks wayy better now.. I'm actually having an Exam tomorrow so will be studying, I'll review the code once i'm done with tomorrow's exam.

Non the less, Great work ! It really feels good 🙌

[Ty3uK]

Thanks!

Good luck at exam ❤️

[ParthJadhav]

Thanks!

Good luck at exam ❤️

Thanks @Ty3uK 😄

[ParthJadhav]

Hey @, I just got some time to test it and I noticed that the results aren't cleared after the search bar is empty. It should return to it's original state when the searchBar doesn't have any search term..

[Ty3uK]

Hey @, I just got some time to test it and I noticed that the results aren't cleared after the search bar is empty. It should return to it's original state when the searchBar doesn't have any search term..

Got it!

[Ty3uK]

Hey @, I just got some time to test it and I noticed that the results aren't cleared after the search bar is empty. It should return to it's original state when the searchBar doesn't have any search term..

Fixed 🙂

[ParthJadhav]

Hey @Ty3uK , It works as expected now. Thanks for the changes.

Just I discovered a bug which is seemingly crucial. And this bug does not work in Dev.

Run: yarn tauri build

And run the generated verve.app.

Try adding some numbers and inserting a space afterwards. This causes it to minimise.

https://user-images.githubusercontent.com/42001064/210938334-131628cd-e46c-4c0c-9b1b-71b1ba7c290c.mov

[ParthJadhav]

That issue of windows being closed after pressing space on calculations was because space was considered as a click on the result.. Hence it was copying the value & closing the result when we pressed space.

[ParthJadhav]

Will merge this, Tested it thoroughly and it works great. Thanks for this amazing improvement @Ty3uK 🤝