stop flickery svelte components on input #25
Labels
Comments
ParthJadhav
added
bug
|
It only happens with the Calculator Component which was added recently https://github.com/ParthJadhav/Verve/blob/master/src/routes/App/lib/CalculationResult.svelte |
Ty3uK
added a commit
to Ty3uK/Verve
that referenced
this issue
Jan 5, 2023
Related to ParthJadhav#25. Search results flickers because of three things: - `handleInput` resets the `results` array, which immediately re-renders `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 - `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:` directive 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
added a commit
to Ty3uK/Verve
that referenced
this issue
Jan 5, 2023
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.
Merged
Merged
ParthJadhav
added a commit
that referenced
this issue
Jan 9, 2023
* fix: reduce flickering 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 <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. * fix: span attributes * fix: remove icon flickering with icons cache * fix: reset `results` when search pattern is empty * chore: fix extra rectangular overlay on calculation results * chore: fix closing window when pressing enter/return * chore: fix keys not being registered Co-authored-by: Parth Jadhav <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The half of the window is re-rendered when there is any input. This causes it to look like it's glitching.
The text was updated successfully, but these errors were encountered: