immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-22 09:15:34 +03:00
Code Issues Packages Projects Releases 18 Wiki Activity

fix: re-add scroll compensation (efficiently) (#22848)

Browse Source 
* fix: re-add scroll compensation (efficient)

* Rename showSkeleton to invisible. Adjust skeleton margins, invisible support.

* Fix faulty logic, simplify

* Calculate ratios and determine compensation strategy: height comp for above/partiality visible, month-scroll comp within a fully visible month.

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Min Idzelis
2025-10-13 22:16:05 -04:00
committed by GitHub
parent e8ca7f235c
commit 146973b072
8 changed files with 128 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/lib/elements/Skeleton.svelte
View File

@@ -2,24 +2,21 @@
interface Props {
height: number;
title?: string;
invisible?: boolean;
}
let { height = 0, title }: Props = $props();
let { height = 0, title, invisible = false }: Props = $props();
</script>
<div class="overflow-clip" style:height={height + 'px'}>
<div class={['overflow-clip', { invisible }]} style:height={height + 'px'}>
{#if title}
<div
class="flex pt-7 pb-5 h-6 place-items-center text-xs font-medium text-immich-fg bg-light dark:text-immich-dark-fg md:text-sm"
class="flex pt-7 pb-5 max-md:pt-5 max-md:pb-3 h-6 place-items-center text-xs font-medium text-immich-fg dark:text-immich-dark-fg md:text-sm"
>
{title}
</div>
{/if}
<div
class="animate-pulse absolute h-full ms-[10px] me-[10px]"
style:width="calc(100% - 20px)"
data-skeleton="true"
></div>
<div class="animate-pulse h-full w-full" data-skeleton="true"></div>
</div>
<style>
@@ -47,4 +44,7 @@
0s linear 0.1s forwards delayedVisibility,
pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.invisible [data-skeleton] {
visibility: hidden !important;
}
</style>