diff options
| author | Joe Mou <dev@mou.fo> | 2026-08-11 12:54:27 -0400 |
|---|---|---|
| committer | Joe Mou <dev@mou.fo> | 2026-08-11 13:04:49 -0400 |
| commit | 10f923b51e2844486651493b44974e418a2be6d9 (patch) | |
| tree | 76e2c77e52aca6230f86cb8c2a2995dc9a588e20 /cgithub/views | |
| parent | 9731ebd1bece1187f943a29da474f4aed6e7ee3b (diff) | |
Mitigate placeholder layout shift
Diffstat (limited to 'cgithub/views')
| -rw-r--r-- | cgithub/views/_tree.eta | 7 | ||||
| -rw-r--r-- | cgithub/views/repo.eta | 5 |
2 files changed, 10 insertions, 2 deletions
diff --git a/cgithub/views/_tree.eta b/cgithub/views/_tree.eta index 2eb445f..fc7707b 100644 --- a/cgithub/views/_tree.eta +++ b/cgithub/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/cgithub/views/repo.eta b/cgithub/views/repo.eta index 9122594..1bff97f 100644 --- a/cgithub/views/repo.eta +++ b/cgithub/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) %> |