From 3f3c5562fb679adec6ccb3c4db1ed52caf5985d9 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Mon, 18 Nov 2024 14:41:54 +0100
Subject: [PATCH] Improve resizing on scroll

---
 frontend/pnpm-lock.yaml                | 10 +++++++++-
 frontend/viewer/package.json           |  1 +
 frontend/viewer/src/ProjectView.svelte |  5 +++--
 frontend/viewer/src/app.postcss        |  2 +-
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 30589ae61..b5631569c 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -297,6 +297,9 @@ importers:
       fast-json-patch:
         specifier: ^3.1.1
         version: 3.1.1
+      just-throttle:
+        specifier: ^4.2.0
+        version: 4.2.0
       postcss:
         specifier: 'catalog:'
         version: 8.4.47
@@ -3954,6 +3957,9 @@ packages:
   just-order-by@1.0.0:
     resolution: {integrity: sha512-m83kcBMoX43jRLDzR6J7NzIpEEpMmMmh0xwVSMKpXObIFh6ejxpQ02HXc9gCq5cFWHbL5gZ3yRHRGYgMGpoUnA==}
 
+  just-throttle@4.2.0:
+    resolution: {integrity: sha512-/iAZv1953JcExpvsywaPKjSzfTiCLqeguUTE6+VmK15mOcwxBx7/FHrVvS4WEErMR03TRazH8kcBSHqMagYIYg==}
+
   jwt-decode@4.0.0:
     resolution: {integrity: sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==}
     engines: {node: '>=18'}
@@ -8656,7 +8662,7 @@ snapshots:
       sirv: 3.0.0
       tinyglobby: 0.2.9
       tinyrainbow: 1.2.0
-      vitest: 2.1.4(@types/node@20.12.12)(@vitest/ui@2.1.4)(happy-dom@15.7.4)
+      vitest: 2.1.4(@types/node@22.7.3)(@vitest/ui@2.1.4)(happy-dom@15.7.4)
 
   '@vitest/utils@2.1.4':
     dependencies:
@@ -10235,6 +10241,8 @@ snapshots:
 
   just-order-by@1.0.0: {}
 
+  just-throttle@4.2.0: {}
+
   jwt-decode@4.0.0: {}
 
   keyv@4.5.4:
diff --git a/frontend/viewer/package.json b/frontend/viewer/package.json
index b5275e8a1..f25291346 100644
--- a/frontend/viewer/package.json
+++ b/frontend/viewer/package.json
@@ -55,6 +55,7 @@
     "@microsoft/signalr": "^8.0.0",
     "autoprefixer": "^10.4.19",
     "fast-json-patch": "^3.1.1",
+    "just-throttle": "^4.2.0",
     "postcss": "catalog:",
     "svelte-exmarkdown": "^3.0.5",
     "svelte-preprocess": "catalog:",
diff --git a/frontend/viewer/src/ProjectView.svelte b/frontend/viewer/src/ProjectView.svelte
index 2a53431e4..af535ba5e 100644
--- a/frontend/viewer/src/ProjectView.svelte
+++ b/frontend/viewer/src/ProjectView.svelte
@@ -37,6 +37,7 @@
   import {useEventBus} from './lib/services/event-bus';
   import AboutDialog from './lib/about/AboutDialog.svelte';
   import { initProjectCommands, type NewEntryDialogOptions } from './lib/commands';
+  import throttle from 'just-throttle';
 
   export let loading = false;
 
@@ -229,11 +230,11 @@
 
   let editorElem: HTMLElement | undefined;
   let spaceForEditorStyle: string = '';
-  const updateSpaceForEditor = makeDebouncer(() => {
+  const updateSpaceForEditor = throttle(() => {
     if (!editorElem) return;
     const availableHeight = getAvailableHeightForElement(editorElem);
     spaceForEditorStyle = `--space-for-editor: ${availableHeight}px`;
-  }, 30).debounce;
+  }, 20, { leading: false, trailing: true });
 
   $: editorElem && updateSpaceForEditor();
   onMount(() => {
diff --git a/frontend/viewer/src/app.postcss b/frontend/viewer/src/app.postcss
index 09816a4d2..1c0e90f5a 100644
--- a/frontend/viewer/src/app.postcss
+++ b/frontend/viewer/src/app.postcss
@@ -57,7 +57,7 @@
 
   .side-scroller {
     height: calc(var(--space-for-editor, 100vh) - 32px);
-    transition: height 0.1s ease-out, opacity 0.2s ease-out;
+    transition: height 0.05s ease-out, opacity 0.2s ease-out;
     position: sticky;
     top: 16px;
   }