lazy-loading done

site/public/styles/global.css

@@ -395,6 +395,12 @@ textarea:focus-visible {
   background: rgba(255, 255, 255, 0.06);
 }
 
+.card-media .img-shimmer-wrap {
+  width: 100%;
+  height: 180px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
 .card-media img {
   width: 100%;
   height: 180px;
@@ -410,6 +416,63 @@ textarea:focus-visible {
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }
 
+/* --- Image shimmer / lazy-load placeholder --- */
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.img-shimmer-wrap {
+  position: relative;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.img-shimmer-wrap::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.12) 35%,
+    rgba(255, 255, 255, 0.22) 50%,
+    rgba(255, 255, 255, 0.12) 65%,
+    transparent 100%
+  );
+  animation: shimmer 1.6s ease-in-out infinite;
+}
+
+.img-shimmer-wrap img {
+  position: relative;
+  z-index: 2;
+}
+
+.img-shimmer-wrap img.img-loading {
+  opacity: 0 !important;
+}
+
+.img-shimmer-wrap img.img-loaded {
+  opacity: 1;
+  transition: opacity 250ms ease;
+}
+
+.img-shimmer-wrap.img-error::before {
+  animation: none;
+}
+
+.img-shimmer-wrap.img-loaded::before {
+  display: none;
+}
+
+/* --- End image shimmer --- */
+
 .card-body {
   display: flex;
   flex: 1;
@@ -505,7 +568,8 @@ textarea:focus-visible {
     grid-template-columns: 1fr;
   }
   .card-media img,
-  .card-placeholder {
+  .card-placeholder,
+  .card-media .img-shimmer-wrap {
     height: 200px;
   }
 }