From 04d5f20b46f1274afbc2ee07f818e70322dab0ce Mon Sep 17 00:00:00 2001
From: Florian Baumann <flo@noqqe.de>
Date: Mon, 27 Feb 2023 15:20:39 +0100
Subject: [PATCH] Lazy load images

---
 templates/index.tmpl | 55 +++++++++++++++++++++++---------------------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/templates/index.tmpl b/templates/index.tmpl
index a9ff85f..097c8d9 100644
--- a/templates/index.tmpl
+++ b/templates/index.tmpl
@@ -8,27 +8,29 @@
   <!-- <link rel="stylesheet" href="https://unpkg.com/bulma-dracula"> -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
 
-<style>
-.cardpreview {
-    position: relative;
-    display: inline-block;
-    border-bottom: 1px dotted black;
-}
+  <style>
+    .cardpreview {
+      position: relative;
+      display: inline-block;
+      border-bottom: 1px dotted black;
+    }
 
-.cardpreview .cardpreviewtext {
-    visibility: hidden;
-    width: 300px;
-    color: #fff;
+    .cardpreview .cardpreviewtext {
+      visibility: hidden;
+      display: none;
+      width: 300px;
+      color: #fff;
 
-    /* Position the cardpreview */
-    position: absolute;
-    z-index: 1;
-}
+      /* Position the cardpreview */
+      position: absolute;
+      z-index: 1;
+    }
 
-.cardpreview:hover .cardpreviewtext {
-    visibility: visible;
-}
-</style>
+    .cardpreview:hover .cardpreviewtext {
+      visibility: visible;
+      display: inline-block;
+    }
+  </style>
 </head>
 
 
@@ -64,7 +66,8 @@
                   <select name="set" id="set" form="searchform">
                     <option value="">-</option>
                     {{range .sets}}
-                    <option value="{{ index . "code" }}">{{ printf "%.25s" (index . "_id") }} ({{ index . "count" }})</option>
+                    <option value="{{ index . "code" }}">{{ printf "%.25s" (index . "_id") }} ({{ index . "count" }})
+                    </option>
                     {{end}}
                   </select>
                 </div>
@@ -141,12 +144,12 @@
           <tr>
             <td>{{.SerraCount}}</td>
             <td>
-<div class="cardpreview"><strong>{{.Name }}</strong>
-  <span class="cardpreviewtext">
-      <img src="{{ .ImageUris.Normal }}" alt="" />
-  </span>
-</div>
-</td>
+              <div class="cardpreview"><strong>{{.Name }}</strong>
+                <span class="cardpreviewtext">
+                  <img loading="lazy" src="{{ .ImageUris.Normal }}" alt="" />
+                </span>
+              </div>
+            </td>
             <td>{{.TypeLine}}</td>
             <td>{{.Set}}</td>
             <td>{{.CollectorNumber}}</td>
@@ -160,7 +163,7 @@
         </tbody>
       </table>
 
-</div>
+    </div>
   </section>
 
 </body>