helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: context menu jank (#21844)

Browse source 
* Fix issue with context menu jank by only applying overflow styling when transition is complete

* Remove comment

Co-authored-by: Alex <alex.tran1502@gmail.com>

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Stewart Rand 2025-09-13 00:43:22 -03:00 • committed by GitHub
parent 1823a28e59
commit 4059638151
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 11 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

12
web/src/lib/components/shared-components/context-menu/context-menu.svelte
View file

@ -40,6 +40,8 @@
// of zero when starting the 'slide' animation. // of zero when starting the 'slide' animation.
let height: number = $state(0); let height: number = $state(0);
let isTransitioned = $state(false);
$effect(() => { $effect(() => {
if (menuElement) { if (menuElement) {
let layoutDirection = direction; let layoutDirection = direction;
@ -64,6 +66,12 @@
style:top="{top}px" style:top="{top}px"
transition:slide={{ duration: 250, easing: quintOut }} transition:slide={{ duration: 250, easing: quintOut }}
use:clickOutside={{ onOutclick: onClose }} use:clickOutside={{ onOutclick: onClose }}
onintroend={() => {
isTransitioned = true;
}}
onoutrostart={() => {
isTransitioned = false;
}}
> >
<ul <ul
{id} {id}
@ -73,7 +81,9 @@
bind:this={menuElement} bind:this={menuElement}
class="{isVisible class="{isVisible
? 'max-h-dvh' ? 'max-h-dvh'
: 'max-h-0'} flex flex-col transition-all duration-250 ease-in-out outline-none overflow-auto" : 'max-h-0'} flex flex-col transition-all duration-250 ease-in-out outline-none {isTransitioned
? 'overflow-auto'
: ''}"
role="menu" role="menu"
tabindex="-1" tabindex="-1"
> >