From 97f43fbd4555faed99db23edeff32a25cc740314 Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Fri, 8 Dec 2023 14:32:04 +1000
Subject: [PATCH] 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.
---
 ts/components/ConfigInput.svelte  | 7 +++----
 ts/components/DropdownItem.svelte | 4 ++++
 ts/components/Select.svelte       | 2 +-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/ts/components/ConfigInput.svelte b/ts/components/ConfigInput.svelte
index e74c3d2fac3..b3ad848b25b 100644
--- a/ts/components/ConfigInput.svelte
+++ b/ts/components/ConfigInput.svelte
@@ -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;
diff --git a/ts/components/DropdownItem.svelte b/ts/components/DropdownItem.svelte
index a5ec3b0bda0..ddbeebc7be2 100644
--- a/ts/components/DropdownItem.svelte
+++ b/ts/components/DropdownItem.svelte
@@ -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);
diff --git a/ts/components/Select.svelte b/ts/components/Select.svelte
index ae763d25450..ec10ec752db 100644
--- a/ts/components/Select.svelte
+++ b/ts/components/Select.svelte
@@ -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>