From 313be6bfd1188aaec5472e76ca765dd03a3b9b0c Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Thu, 28 Aug 2025 13:47:28 +0200
Subject: [PATCH] perf: intrinsic size on anime cards perf: pre-load downloads
 library

---
 package.json                             | 2 +-
 src/lib/components/SearchModal.svelte    | 4 ++--
 src/lib/components/ui/cards/small.svelte | 2 +-
 src/lib/modules/torrent/client.ts        | 4 ++++
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index eb713e9..1b2e5f2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "ui",
-	"version": "6.4.107",
+	"version": "6.4.108",
 	"license": "BUSL-1.1",
 	"private": true,
 	"packageManager": "pnpm@9.15.5",
diff --git a/src/lib/components/SearchModal.svelte b/src/lib/components/SearchModal.svelte
index 2b0c545..801f735 100644
--- a/src/lib/components/SearchModal.svelte
+++ b/src/lib/components/SearchModal.svelte
@@ -201,7 +201,7 @@
         <div class='h-full overflow-y-auto px-4 sm:px-6 pt-2' role='menu' tabindex='-1' on:keydown={stopAnimation} on:focusin={stopAnimation} on:pointerenter={stopAnimation} on:pointermove={stopAnimation} use:dragScroll>
           {#await Promise.all([searchResult, $downloaded])}
             {#each Array.from({ length: 12 }) as _, i (i)}
-              <div class='p-3 h-[104px] flex cursor-pointer mb-2 relative rounded-md overflow-hidden border border-border flex-col justify-between'>
+              <div class='p-3 h-[106px] flex cursor-pointer mb-2 relative rounded-md overflow-hidden border border-border flex-col justify-between [content-visibility:auto] [contain-intrinsic-height:auto_106px]'>
                 <div class='h-4 w-40 bg-primary/5 animate-pulse rounded mt-2' />
                 <div class='bg-primary/5 animate-pulse rounded h-2 w-28 mt-1' />
                 <div class='flex justify-between mb-1'>
@@ -218,7 +218,7 @@
             {#if search && media}
               {@const { results, errors } = search}
               {#each filterAndSortResults(results, inputText, downloaded) as result (result.hash)}
-                <div class='p-3 flex cursor-pointer mb-2 relative rounded-md overflow-hidden border border-border select:ring-1 select:ring-ring select:bg-accent select:text-accent-foreground select:scale-[1.02] select:shadow-lg scale-100 transition-all' class:opacity-40={result.accuracy === 'low'} use:click={() => play(result)} title={result.parseObject.file_name[0]}>
+                <div class='p-3 flex cursor-pointer mb-2 relative rounded-md overflow-hidden border border-border select:ring-1 select:ring-ring select:bg-accent select:text-accent-foreground select:scale-[1.02] select:shadow-lg scale-100 transition-all [content-visibility:auto] [contain-intrinsic-height:auto_106px]' class:opacity-40={result.accuracy === 'low'} use:click={() => play(result)} title={result.parseObject.file_name[0]}>
                   {#if result.accuracy === 'high'}
                     <div class='absolute top-0 left-0 w-full h-full -z-10'>
                       <Banner {media} class='object-cover w-full h-full' />
diff --git a/src/lib/components/ui/cards/small.svelte b/src/lib/components/ui/cards/small.svelte
index 506f622..85a921e 100644
--- a/src/lib/components/ui/cards/small.svelte
+++ b/src/lib/components/ui/cards/small.svelte
@@ -28,7 +28,7 @@
   $: status = list(media)
 </script>
 
-<div class='text-white p-4 cursor-pointer shrink-0 relative pointer-events-auto' class:z-40={!hidden} use:hover={[onclick, onhover]}>
+<div class='text-white p-4 cursor-pointer shrink-0 relative pointer-events-auto [content-visibility:auto] [contain-intrinsic-size:auto_152px_auto_290.4px]' class:![content-visibility:visible]={!hidden} class:z-40={!hidden} use:hover={[onclick, onhover]}>
   {#if !hidden}
     <PreviewCard {media} />
   {/if}
diff --git a/src/lib/modules/torrent/client.ts b/src/lib/modules/torrent/client.ts
index d5447cd..a3cb7f4 100644
--- a/src/lib/modules/torrent/client.ts
+++ b/src/lib/modules/torrent/client.ts
@@ -92,3 +92,7 @@ export const server = new class ServerClient {
     return result
   }
 }()
+
+requestIdleCallback(() => {
+  get(server.library)
+}, { timeout: 120_000 })