From a6f5964a6cce9e2c6ede4daade6939aea02a1cb8 Mon Sep 17 00:00:00 2001
From: Booteille <booteille@protonmail.com>
Date: Wed, 18 Dec 2024 12:50:32 +0100
Subject: [PATCH] Add card file skeleton

---
 themes/default/public/js/upload.js     |  7 +++++++
 themes/default/templates/index.html.ep | 26 ++++++++++++++++++++++++--
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/themes/default/public/js/upload.js b/themes/default/public/js/upload.js
index 70a2846..a782521 100644
--- a/themes/default/public/js/upload.js
+++ b/themes/default/public/js/upload.js
@@ -150,6 +150,12 @@ document.addEventListener("DOMContentLoaded", () => {
   ) => {
     const uploadedFilesDOM = document.getElementById("uploaded-files");
 
+    const skeletonCardDOM = document
+      .querySelector("template#card-file-skeleton")
+      .content.cloneNode(true).children[0];
+
+    uploadedFilesDOM.prepend(skeletonCardDOM);
+
     const serverUrl = new URL(ws_url.replace("/upload", ""));
     serverUrl.protocol = serverUrl.protocol === "ws:" ? "http:" : "https:";
 
@@ -197,6 +203,7 @@ document.addEventListener("DOMContentLoaded", () => {
                   updateProgressBar(job.lufiFile, uploadingFileCard);
                 });
 
+                skeletonCardDOM.remove();
                 uploadedFilesDOM.prepend(uploadingFileCard);
 
                 return job
diff --git a/themes/default/templates/index.html.ep b/themes/default/templates/index.html.ep
index b1b214b..5269e23 100644
--- a/themes/default/templates/index.html.ep
+++ b/themes/default/templates/index.html.ep
@@ -187,12 +187,34 @@
         </div>
       </div>
 
-      <div id="uploaded-files" class="block">
-      </div>
+      <div id="uploaded-files" class="block"></div>
     </div>
   </div>
 % }
 
+<template id="card-file-skeleton">
+  <article class="card-file-skeleton card m-2 is-size-6 skeleton-block">
+    <div class="card-content p-2">
+      <div class="content fixed-grid has-12-cols">
+        <div class="grid is-vcentered">
+          <div class="cell is-col-1">
+              <span class="icon fas fa-file fa-2x is-large has-text-primary" aria-hidden="true"></span>
+          </div>
+          <div class="cell is-col-span-10">
+            <strong class="is-block wb-all name is-overflow-x"></strong>
+            <small class="is-block size mt-1"></small>
+          </div>
+
+          <button class="is-narrow is-pulled-right card-header-icon" aria-label="<%= l('Close') %>">
+            <span class="delete"></span>
+          </button>
+        </div>
+      
+      </div>
+    </div>
+  </article>
+</template>
+
 <template id="card-file-error">
   <article class="card-file-error card m-2 is-size-6">
     <div class="card-content p-2">