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:
Damien Elmes 2023-12-08 14:32:04 +10:00
parent e2625d648b
commit 97f43fbd45
3 changed files with 8 additions and 5 deletions

View file

@ -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;

View file

@ -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);

View file

@ -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>