mirror of
https://github.com/ankitects/anki.git
synced 2025-09-20 06:52:21 -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";
|
const rtl: boolean = window.getComputedStyle(document.body).direction == "rtl";
|
||||||
|
|
||||||
export let grow = true;
|
export let grow = true;
|
||||||
let width = 0;
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="config-input position-relative justify-content-end"
|
class="config-input position-relative justify-content-end"
|
||||||
class:flex-grow-1={grow}
|
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" />
|
<slot name="revert" />
|
||||||
</div>
|
</div>
|
||||||
<slot />
|
<slot />
|
||||||
|
@ -23,7 +21,8 @@
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.revert {
|
.revert {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: var(--offset);
|
right: -1.7em;
|
||||||
|
bottom: -1px;
|
||||||
color: var(--fg-faint);
|
color: var(--fg-faint);
|
||||||
&.rtl {
|
&.rtl {
|
||||||
right: unset;
|
right: unset;
|
||||||
|
|
|
@ -63,6 +63,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
color: var(--fg);
|
color: var(--fg);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover:not([disabled]) {
|
&:hover:not([disabled]) {
|
||||||
background: var(--highlight-bg);
|
background: var(--highlight-bg);
|
||||||
color: var(--highlight-fg);
|
color: var(--highlight-fg);
|
||||||
|
|
|
@ -137,6 +137,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||||
}
|
}
|
||||||
|
|
||||||
function revealed() {
|
function revealed() {
|
||||||
|
clientWidth = element?.clientWidth ?? 150;
|
||||||
if (selected === undefined) {
|
if (selected === undefined) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -215,7 +216,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||||
}}
|
}}
|
||||||
bind:this={element}
|
bind:this={element}
|
||||||
use:asReference
|
use:asReference
|
||||||
bind:clientWidth
|
|
||||||
>
|
>
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
<div class="label">{@html label}</div>
|
<div class="label">{@html label}</div>
|
||||||
|
|
Loading…
Reference in a new issue