Thumbnail fade effect and sync thumbnail loading.

client/src/routes/Transfers.svelte

@@ -60,12 +60,12 @@
     ws?.send(JSON.stringify({ type: "select", infoHash: hash, index }));
   }
 
-async function removeTorrent(hash) {
-  if (!confirm("Bu transferi silmek istediğine emin misin?")) return;
-  await apiFetch(`/api/torrents/${hash}`, { method: "DELETE" });
-  torrents = torrents.filter(t => t.infoHash !== hash);
-  await list();
-}
+  async function removeTorrent(hash) {
+    if (!confirm("Bu transferi silmek istediğine emin misin?")) return;
+    await apiFetch(`/api/torrents/${hash}`, { method: "DELETE" });
+    torrents = torrents.filter((t) => t.infoHash !== hash);
+    await list();
+  }
 
   function streamURL(hash, index = 0) {
     const token = localStorage.getItem("token");
@@ -264,7 +264,12 @@ async function removeTorrent(hash) {
       {#each torrents as t (t.infoHash)}
         <div class="torrent" on:click={() => openModal(t)}>
           {#if t.thumbnail}
-            <img src={`${API}${t.thumbnail}`} alt="thumb" class="thumb" />
+            <img
+              src={`${API}${t.thumbnail}?token=${localStorage.getItem("token")}`}
+              alt="thumb"
+              class="thumb"
+              on:load={(e) => e.target.classList.add("loaded")}
+            />
           {:else}
             <div class="thumb placeholder">
               <i class="fa-regular fa-image"></i>
@@ -629,4 +634,4 @@ async function removeTorrent(hash) {
       font-size: 10px;
     }
   }
-</style>
+</style>

client/src/styles/main.css

@@ -450,6 +450,50 @@ body,
   font-weight: 600;
 }
 
+/* 🌫️ Thumbnail fade-in + blur efekti */
+/* 🌫️ Fade-in thumbnail efekti — sadece img'ler için geçerli */
+img.thumb {
+  opacity: 0;
+  filter: blur(10px) brightness(0.9);
+  transform: scale(1.03);
+  transition: opacity 0.6s ease, filter 1s ease, transform 0.6s ease;
+}
+
+img.thumb.loaded {
+  opacity: 1;
+  filter: blur(0) brightness(1);
+  transform: scale(1);
+}
+
+/* 🪄 Placeholder her zaman görünür */
+.thumb.placeholder {
+  opacity: 1 !important;
+  filter: none !important;
+  transform: none !important;
+  background: linear-gradient(100deg, #f0f0f0 20%, #e2e2e2 50%, #f0f0f0 80%);
+  background-size: 200% 100%;
+  animation: shimmer 1.4s infinite;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+}
+
+.thumb.placeholder i {
+  font-size: 28px;
+  color: #777;
+  opacity: 0.9;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
 /* =======================================================
    📱 RESPONSIVE
    ======================================================= */