Merge pull request #1484 from ahti/animations

fix loading animation and row height jumping while loading dir sizes

2 files changed, 28 insertions, 33 deletions

diff --git a/data/style.scss b/data/style.scss
index 44c3752..1026ee5 100644
--- a/data/style.scss
+++ b/data/style.scss
@@ -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%; }
   }
 }
 
diff --git a/src/renderer.rs b/src/renderer.rs
index 6a8b808..3f67695 100644
--- a/src/renderer.rs
+++ b/src/renderer.rs
@@ -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);
                 "#))
             }