more fixes

public/script.ts

@@ -206,7 +206,8 @@ class QuixoticApp {
                 <div class='tg-list-item__content'>
                     <div class='tg-list-item__media'>
                         <img class='tg-list-item__thumbnail' 
-                             src='${video.thumbnail}' 
+                             src='data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="80" height="60"%3E%3Crect fill="%23f1f1f1" width="80" height="60"/%3E%3C/svg%3E'
+                             data-src='${video.thumbnail}' 
                              alt='${this.escapeHtml(video.title)}' 
                              loading='lazy'>
                         <div class='tg-list-item__duration'>${this.formatDuration(video.duration)}</div>
@@ -238,6 +239,25 @@ class QuixoticApp {
                 element.style.transform = '';
             });
         });
+        
+        // Lazy load images with IntersectionObserver
+        const imageObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const img = entry.target as HTMLImageElement;
+                    const src = img.getAttribute('data-src');
+                    if (src) {
+                        img.src = src;
+                        img.removeAttribute('data-src');
+                        imageObserver.unobserve(img);
+                    }
+                }
+            });
+        }, { rootMargin: '50px' });
+        
+        this.results.querySelectorAll('img[data-src]').forEach(img => {
+            imageObserver.observe(img);
+        });
 
         this.results.classList.remove('tg-hidden');
         this.results.classList.add('tg-list--visible');