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

View file

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

View file

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