💄 Add display animations to fsDisp

Author: GitSquared

src/assets/css/filesystem.css

@@ -43,6 +43,12 @@ div#fs_disp_container > * {
     align-items: center;
     justify-content: center;
     cursor: pointer;
+    opacity: 1;
+    transition: opacity .2s linear;
+}
+
+div#fs_disp_container > *.animationWait {
+    opacity: 0 !important;
 }
 
 div#fs_disp_container > *:active {

src/classes/filesystem.class.js

@@ -235,7 +235,7 @@ class FilesystemDisplay {
             });
         };
 
-        this.render = (blockList) => {
+        this.render = async blockList => {
             if (this.failed === true) return false;
 
             document.getElementById("fs_disp_title_dir").innerText = this.dirpath;
@@ -338,7 +338,7 @@ class FilesystemDisplay {
                         break;
                 }
 
-                filesDOM += `<div class="fs_disp_${e.type}${hidden}" onclick="${cmd}">
+                filesDOM += `<div class="fs_disp_${e.type}${hidden} animationWait" onclick="${cmd}">
                                 <svg viewBox="0 0 24.00 24.00">${icon}</svg>
                                 <h3>${e.name}</h3>
                             </div>`;
@@ -367,6 +367,19 @@ class FilesystemDisplay {
                     this.space_bar.bar.value = 100;
                 }
             }
+
+            function delay(ms) {
+                return new Promise((resolve, reject) => {
+                    setTimeout(resolve, ms);
+                });
+            }
+            // Render animation
+            let id = 0;
+            while (this.filesContainer.childNodes[id]) {
+                this.filesContainer.childNodes[id].setAttribute("class", this.filesContainer.childNodes[id].getAttribute("class").replace(" animationWait", ""));
+                await delay(50);
+                id++;
+            }
         };
 
         // Automatically start indexing supposed beginning CWD