mirror of
https://github.com/immich-app/immich.git
synced 2025-06-14 21:38:26 +02:00
837b1e4929
* Squashed * Change strategy - now pre-measure buckets offscreen, so don't need to worry about sub-bucket scroll preservation * Reduce jank on scroll, delay DOM updates until after scroll * css opt, log measure time * Trickle out queue while scrolling, flush when stopped * yay * Cleanup cleanup... * everybody... * everywhere... * Clean up cleanup! * Everybody do their share * CLEANUP! * package-lock ? * dynamic measure, todo * Fix web test * type lint * fix e2e * e2e test * Better scrollbar * Tuning, and more tunables * Tunable tweaks, more tunables * Scrollbar dots and viewport events * lint * Tweaked tunnables, use requestIdleCallback for garbage tasks, bug fixes * New tunables, and don't update url by default * Bug fixes * Bug fix, with debug * Fix flickr, fix graybox bug, reduced debug * Refactor/cleanup * Fix * naming * Final cleanup * review comment * Forgot to update this after naming change * scrubber works, with debug * cleanup * Rename scrollbar to scrubber * rename to * left over rename and change to previous album bar * bugfix addassets, comments * missing destroy(), cleanup --------- Co-authored-by: Alex <alex.tran1502@gmail.com>
35 lines
950 B
Svelte
35 lines
950 B
Svelte
<script lang="ts">
|
|
export let title: string | null = null;
|
|
export let height: string | null = null;
|
|
</script>
|
|
|
|
<div class="overflow-clip" style={`height: ${height}`}>
|
|
{#if title}
|
|
<div
|
|
class="flex z-[100] sticky top-0 pt-7 pb-5 h-6 place-items-center text-xs font-medium text-immich-fg bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg md:text-sm"
|
|
>
|
|
<span class="w-full truncate first-letter:capitalize">{title}</span>
|
|
</div>
|
|
{/if}
|
|
<div id="skeleton" style={`height: ${height}`}></div>
|
|
</div>
|
|
|
|
<style>
|
|
#skeleton {
|
|
background-image: url('/light_skeleton.png');
|
|
background-repeat: repeat;
|
|
background-size: 235px, 235px;
|
|
}
|
|
:global(.dark) #skeleton {
|
|
background-image: url('/dark_skeleton.png');
|
|
}
|
|
@keyframes delayedVisibility {
|
|
to {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
#skeleton {
|
|
visibility: hidden;
|
|
animation: 0s linear 0.1s forwards delayedVisibility;
|
|
}
|
|
</style>
|