feat: add lazy loading, skeleton cards, and pull-to-refresh

js/components/listing-card.js

@@ -93,8 +93,10 @@ class ListingCard extends HTMLElement {
         
         this.innerHTML = /* html */`
             <a href="#/listing/${escapeHTML(id)}" class="listing-link">
-                <div class="listing-image" ${image ? `style="background-image: url('${escapeHTML(image)}')"` : ''}>
-                    ${!image ? placeholderSvg : ''}
+                <div class="listing-image">
+                    ${image 
+                        ? `<img src="${escapeHTML(image)}" alt="${escapeHTML(title)}" loading="lazy">`
+                        : placeholderSvg}
                 </div>
                 <div class="listing-info">
                     <h3 class="listing-title">${escapeHTML(title)}</h3>
@@ -174,11 +176,16 @@ style.textContent = /* css */`
     listing-card .listing-image {
         aspect-ratio: 1;
         background: var(--color-bg-tertiary);
-        background-size: cover;
-        background-position: center;
         display: flex;
         align-items: center;
         justify-content: center;
+        overflow: hidden;
+    }
+    
+    listing-card .listing-image img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
     }
     
     listing-card .listing-image .placeholder-icon {