mirror of
https://github.com/immich-app/immich.git
synced 2025-12-27 01:11:42 +03:00
146973b072
* 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>
51 lines
1.2 KiB
Svelte
51 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
interface Props {
|
|
height: number;
|
|
title?: string;
|
|
invisible?: boolean;
|
|
}
|
|
|
|
let { height = 0, title, invisible = false }: Props = $props();
|
|
</script>
|
|
|
|
<div class={['overflow-clip', { invisible }]} style:height={height + 'px'}>
|
|
{#if title}
|
|
<div
|
|
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 h-full w-full" data-skeleton="true"></div>
|
|
</div>
|
|
|
|
<style>
|
|
[data-skeleton] {
|
|
background-image: url('/light_skeleton.png');
|
|
background-repeat: repeat;
|
|
background-size: 235px, 235px;
|
|
}
|
|
@media (max-width: 767px) {
|
|
[data-skeleton] {
|
|
background-size: 100px, 100px;
|
|
}
|
|
}
|
|
:global(.dark) [data-skeleton] {
|
|
background-image: url('/dark_skeleton.png');
|
|
}
|
|
@keyframes delayedVisibility {
|
|
to {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
[data-skeleton] {
|
|
visibility: hidden;
|
|
animation:
|
|
0s linear 0.1s forwards delayedVisibility,
|
|
pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
.invisible [data-skeleton] {
|
|
visibility: hidden !important;
|
|
}
|
|
</style>
|