stats

app.py

@@ -151,10 +151,14 @@ pie_chart = Div(generate_contributions_chart(), id="pie-chart")
 style = Style("""
                 .grid { margin-bottom: 1rem; }
                 .card { display: flex; flex-direction: column; }
+                .card img { margin-bottom: 0.5rem; width: 500px; height: 500px; object-fit: cover; }
                 .card img { margin-bottom: 0.5rem; }
                 .card h5 { margin: 0; font-size: 0.9rem; line-height: 1.2; }
                 .card a { color: inherit; text-decoration: none; }
                 .card a:hover { text-decoration: underline; }
+                .htmx-indicator { display: none; }
+                .htmx-request .htmx-indicator { display: inline; }
+                .htmx-request.htmx-indicator { display: inline; }
             """)
 
 app, rt = fast_app(html_style=(style,))
@@ -223,16 +227,20 @@ def generate_week_content(current_week):
             )
         ]
 
-        # insert image
         card_content.insert(
             0,
-            Img(
-                src=PLACEHOLDER_IMAGE,  # image_url,
-                alt="Article image",
-                style="max-width: 100%; height: auto; margin-bottom: 15px;",
+            Div(
+                Img(src=PLACEHOLDER_IMAGE, alt="Article image", style="width: 500px; height: 500px; object-fit: cover;"),
+                Img(
+                    src="/static/loading.gif",
+                    alt="Loading",
+                    cls="htmx-indicator",
+                    style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);",
+                ),
+                style="position: relative;",
                 hx_get=f"/image/{arxiv_id}",
                 hx_trigger="revealed",
-                hx_swap="outerHTML",
+                hx_swap="innerHTML",
             ),
         )