fix: reduce flickering #30
Conversation
Related to ParthJadhav#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 <img> 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.
|
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) |
|
I figured out that non-beated icon flickering is about |
|
So I finally beat it with Screen.Recording.2023-01-05.at.22.27.31.mp4 |
|
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 🙌 |
|
Thanks! Good luck at exam ❤️ |
Thanks @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! |
Fixed 🙂 |
|
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: And run the generated verve.app. Try adding some numbers and inserting a space afterwards. This causes it to minimise. Screen.Recording.2023-01-06.at.11.16.25.AM.mov |
There was a problem hiding this comment.
Hey @Ty3uK , Whenever free please do check the comment I left about the calculations being closed after typing Space
|
That issue of windows being closed after pressing space on calculations was because |
|
Will merge this, Tested it thoroughly and it works great. Thanks for this amazing improvement @Ty3uK 🤝 |
Related to #25.
Search results flickers because of three things (IMO):
handleInputresets theresultsarray, which immediately dropping list with#ifdirective inSearchResultcomponentfocusandblurare not immediate operation, that's why another kind of flickering is a transition between focused and non-focused state (gray background)getIconfunction is another "bottleneck"; preservation of space for upcommingMost "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
:globalin code. Maybe you know better way to change classes without losing focus.