From d2c94ae32ff8d88f438d0e3348ca4f4a81f7bdd7 Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Tue, 11 Aug 2026 12:54:27 -0400
Subject: Mitigate placeholder layout shift

---
 views/_tree.eta | 7 ++++++-
 views/repo.eta  | 5 ++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/views/_tree.eta b/views/_tree.eta
index 2eb445f..fc7707b 100644
--- a/views/_tree.eta
+++ b/views/_tree.eta
@@ -1,7 +1,12 @@
 <%~ include("./_nav.eta", {...it, isTree: true}) %>
 
 <% const commitPath = it.path && it.path !== "/" ? it.path : ""; %>
-<div class="placeholder box" data-src="/api/<%= it.repo.owner %>/<%= it.repo.name %>/latest-commit/<%= it.branch %>/<%= commitPath %>">Loading latest commit…</div>
+<div class="placeholder commit box" data-src="/api/<%= it.repo.owner %>/<%= it.repo.name %>/latest-commit/<%= it.branch %>/<%= commitPath %>">
+  <div>
+    <div>…</div>
+    <div class="commit-author">…</div>
+  </div>
+</div>
 
 <table>
   <% for (const item of it.items) { %>
diff --git a/views/repo.eta b/views/repo.eta
index 9122594..1bff97f 100644
--- a/views/repo.eta
+++ b/views/repo.eta
@@ -29,6 +29,9 @@
   </div>
 <% } %>
 
-<div class="placeholder box" data-src="/api/<%= it.repo.owner %>/<%= it.repo.name %>/languages">Loading languages…</div>
+<div class="placeholder languages box" data-src="/api/<%= it.repo.owner %>/<%= it.repo.name %>/languages">
+    <div class="language-bar"><span style="width: 100%; background: #ededed"></span></div>
+    <ul class="language-list"><li>…</li></ul>
+</div>
 
 <%~ include("./_tree", it) %>
-- 
cgit v1.3.1