From 4bdb920c71653849ca28f5e8945a70be8750472c Mon Sep 17 00:00:00 2001
From: Niko Abeler <niko@rerere.org>
Date: Thu, 9 May 2024 10:58:32 +0200
Subject: [PATCH] add animation while uploading a dropped file

---
 web/static/editor.js |  6 ++++++
 web/static/style.css | 23 ++++++++++++++++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/web/static/editor.js b/web/static/editor.js
index fd51c82..f3932e7 100644
--- a/web/static/editor.js
+++ b/web/static/editor.js
@@ -30,6 +30,7 @@ function addFileDrop(id) {
         const formData = new FormData()
         formData.append("file", file)
 
+        textArea.classList.add("drop-file-process")
         fetch(
             "/admin/api/binaries",
             {
@@ -44,6 +45,11 @@ function addFileDrop(id) {
             } else {
                 textArea.value += `\n[${file.name}](${data.location})`
             }
+            textArea.classList.remove("drop-file-process")
+        }).catch(err => {
+            console.error(err);
+        }).finally(() => {
+            textArea.classList.remove("drop-file-process")
         })
 
     }
diff --git a/web/static/style.css b/web/static/style.css
index cd29df1..e036c76 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -28,4 +28,25 @@
     border-style: dashed;
     border-width: 4px;
     border-color: #5391ff;
-}
\ No newline at end of file
+}
+
+@keyframes border-pulsate {
+    0% {
+        border-color:  #5391ff;
+    }
+
+    50% {
+        border-color: rgba(0, 255, 255, 0);
+    }
+
+    100% {
+        border-color:  #5391ff;
+    }
+}
+
+.drop-file-process {
+    border-style: dashed;
+    border-width: 4px;
+    border-color: #5391ff;
+    animation: border-pulsate 2s infinite;
+}