refactor: move more elements (#22093)

web/src/lib/elements/Skeleton.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  interface Props {
+    height: number;
+    title: string;
+  }
+
+  let { height = 0, title }: Props = $props();
+</script>
+
+<div class="overflow-clip" style:height={height + 'px'}>
+  <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"
+  >
+    {title}
+  </div>
+  <div
+    class="animate-pulse absolute h-full ms-[10px] me-[10px]"
+    style:width="calc(100% - 20px)"
+    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;
+  }
+</style>