mirrors/MiniHttpServer
1
0
Fork 0
mirror of https://github.com/svenstaro/miniserve synced 2025-04-29 15:57:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix loading animation and row height jumping while loading dir sizes

Browse Source
This commit is contained in:
Lukas Stabe 2025-03-09 10:17:40 +01:00
parent 2f0ca715d3
commit 8507fdec3e
2 changed files with 28 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
data/style.scss
View File

@ -428,22 +428,35 @@ td.date-cell {
justify-content: space-between;
}
.loading-indicator {
width: 65%;
height: 15px;
margin-left: 35%;
animation: shimmer 2s infinite;
background: linear-gradient(to right, #e6e6e655 5%, #77777755 25%, #e6e6e655 35%);
background-size: 500px 100%;
}
tr.entry-type-directory .size-cell {
&:not([data-size])::after {
content: "xxxx KiB"; // hidden placeholder to get text-like width and height
color: transparent;
@keyframes shimmer {
from {
background-position: -500px 0;
animation:
shimmer 2.5s ease-in-out reverse infinite,
bump 1.25s ease-out alternate-reverse infinite;
background:
linear-gradient(to left, #e6e6e633 0%, #e6e6e633 20%, #e7e7e744 40%, #ececec70 45%, #e7e7e755 60%, #e6e6e633 80%, #e6e6e633 100%),
linear-gradient(to bottom, #ffffff00 40%, #ffffff18 60%, #ffffff50 80%);
background-size: 500% 160%;
border-radius: 4px;
}
to {
background-position: 500px 0;
&[data-size]::after {
content: attr(data-size);
}
@keyframes bump {
from { background-position-y: 30%; }
to { background-position-y: 0; }
}
@keyframes shimmer {
from { background-position-x: 0; }
to { background-position-x: 100%; }
}
}

22
src/renderer.rs
View File

@ -687,21 +687,6 @@ fn page_header(
}).then(resp => resp.ok ? resp.text() : "~")
}
// Initialize shimmer effects for .size-cell elements in .entry-type-directory rows
//
// TODO: Perhaps it'd be better to statically do this during html generation in
// entry_row()?
function initializeLoadingIndicators() {
const directoryCells = document.querySelectorAll('tr.entry-type-directory .size-cell');
directoryCells.forEach(cell => {
// Add a loading indicator to each cell
const loadingIndicator = document.createElement('div');
loadingIndicator.className = 'loading-indicator';
cell.appendChild(loadingIndicator);
});
}
function updateSizeCells() {
const directoryCells = document.querySelectorAll('tr.entry-type-directory .size-cell');
@ -712,12 +697,10 @@ fn page_header(
// First check our local cache
if (target in dirSizeCache) {
cell.innerHTML = '';
cell.textContent = dirSizeCache[target];
cell.dataset.size = dirSizeCache[target];
} else {
fetchDirSize(target).then(dir_size => {
cell.innerHTML = '';
cell.textContent = dir_size;
cell.dataset.size = dir_size;
dirSizeCache[target] = dir_size;
})
.catch(error => console.error("Error fetching dir size:", error));
@ -725,7 +708,6 @@ fn page_header(
})
}
setInterval(updateSizeCells, 1000);
window.addEventListener('load', initializeLoadingIndicators);
"#))
}