Improve resizing on scroll

sillsdev · Nov 19, 2024 · 3f3c556 · 3f3c556
1 parent fede04b
commit 3f3c556
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git 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
@@ -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
@@ -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;
   }