mirror of
https://github.com/ankitects/anki.git
synced 2025-09-19 14:32:22 -04:00
Further speed up deck options load
Profiling revealed that binding to clientWidth for each component in the deck options was taking up a sizable amount of time, due to the inefficient way it's implemented: https://github.com/sveltejs/svelte/issues/7583 In one case, we can instead defer checking clientWidth until we go to display the popover. In the other case, we can achieve the revert button positioning a different way. The last change dropped the speed index in Chrome from 1.4s to 1s; this change brings it down to 0.7s. Also fixed the hovered select element from jiggling due to a different border width when hovering.
This commit is contained in:
parent
e2625d648b
commit
97f43fbd45
3 changed files with 8 additions and 5 deletions
|
@ -6,15 +6,13 @@
|
|||
const rtl: boolean = window.getComputedStyle(document.body).direction == "rtl";
|
||||
|
||||
export let grow = true;
|
||||
let width = 0;
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="config-input position-relative justify-content-end"
|
||||
class:flex-grow-1={grow}
|
||||
style:--offset="-{width}px"
|
||||
>
|
||||
<div class="revert" class:rtl bind:clientWidth={width}>
|
||||
<div class="revert" class:rtl>
|
||||
<slot name="revert" />
|
||||
</div>
|
||||
<slot />
|
||||
|
@ -23,7 +21,8 @@
|
|||
<style lang="scss">
|
||||
.revert {
|
||||
position: absolute;
|
||||
right: var(--offset);
|
||||
right: -1.7em;
|
||||
bottom: -1px;
|
||||
color: var(--fg-faint);
|
||||
&.rtl {
|
||||
right: unset;
|
||||
|
|
|
@ -63,6 +63,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
border-radius: 0;
|
||||
color: var(--fg);
|
||||
|
||||
&:hover {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:hover:not([disabled]) {
|
||||
background: var(--highlight-bg);
|
||||
color: var(--highlight-fg);
|
||||
|
|
|
@ -137,6 +137,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
}
|
||||
|
||||
function revealed() {
|
||||
clientWidth = element?.clientWidth ?? 150;
|
||||
if (selected === undefined) {
|
||||
return;
|
||||
}
|
||||
|
@ -215,7 +216,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||
}}
|
||||
bind:this={element}
|
||||
use:asReference
|
||||
bind:clientWidth
|
||||
>
|
||||
<div class="inner">
|
||||
<div class="label">{@html label}</div>
|
||||
|
|
Loading…
Reference in a new issue