fix: faster animations

web/assets/spinner.svg

@@ -9,8 +9,8 @@
          </cc:Work>
       </rdf:RDF>
    </metadata>
-   <circle cx="50" cy="50" r="47.5" fill="none" stroke="#b0bec5" stroke-width="5" />
-   <path d="m97.5 50c0 26.234-21.266 47.5-47.5 47.5m-47.5-47.5c2e-7 -26.234 21.266-47.5 47.5-47.5 26.234 0 47.5 21.266 47.5 47.5" fill="none" stroke="#0d47a1" stroke-linecap="round" stroke-width="3">
-      <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1s" repeatDur="indefinite" />
+   <circle cx="50" cy="50" r="45" fill="none" stroke="#b0bec5" stroke-width="10" />
+   <path d="m95 50c0 24.854-20.147 45-45 45m-45-45c2e-7 -24.854 20.147-45 45-45 24.854 0 45 20.147 45 45" fill="none" stroke="#0d47a1" stroke-linecap="round" stroke-width="5">
+      <animateTransform attributeName="transform" dur="1s" from="0 50 50" repeatDur="indefinite" to="360 50 50" type="rotate" />
    </path>
 </svg>

web/components/apps/apps.js

@@ -153,7 +153,7 @@ export async function mount(where) {
       </div>
     </div>
 
-    <div class="modal animate__animated animate__zoomIn animate__faster" id="apps-icons-modal">
+    <div class="modal animate__animated animate__zoomIn" id="apps-icons-modal">
       <div class="modal-card">
         <section id="apps-icons-modal-list" class="modal-card-body"></section>
       </div>
@@ -186,7 +186,7 @@ function appTemplate(app) {
               </span>
             </button>
           </div>
-          <div class="dropdown-menu animate__animated animate__fadeIn animate__faster" role="menu">
+          <div class="dropdown-menu animate__animated animate__fadeIn" role="menu">
             <div class="dropdown-content">
               <a class="dropdown-item" href="https://${app.host}:${location.port}"><i class="fas fa-external-link-alt"></i><strong> Visit</strong></a>
               ${user.isAdmin ? '<a class="dropdown-item" id="apps-app-edit-' + app.id + '"><i class="fas fa-edit"></i><strong> Edit</strong></a>' : ""}
@@ -495,8 +495,8 @@ function openWebview(app) {
   let webview = document.createElement("div");
   webview.classList.add("modal", "is-active");
   webview.innerHTML = /* HTML */ `
-    <div class="modal-background animate__animated animate__fadeIn animate__faster"></div>
-    <div class="modal-card animate__animated animate__zoomIn animate__faster" style="width: 90vw;">
+    <div class="modal-background animate__animated animate__fadeIn"></div>
+    <div class="modal-card animate__animated animate__zoomIn" style="width: 90vw;">
       <header class="modal-card-head">
         <p class="modal-card-title">${app.name}</p>
         <button class="delete" aria-label="close" id="apps-webview-close"></button>

web/components/davs/davs.js

@@ -127,7 +127,7 @@ export async function mount(where) {
       </div>
     </div>
 
-    <div class="modal animate__animated animate__zoomIn animate__faster" id="davs-icons-modal">
+    <div class="modal animate__animated animate__zoomIn" id="davs-icons-modal">
       <div class="modal-card">
         <section id="davs-icons-modal-list" class="modal-card-body"></section>
       </div>
@@ -167,7 +167,7 @@ function davTemplate(dav) {
               </span>
             </button>
           </div>
-          <div class="dropdown-menu animate__animated animate__fadeIn animate__faster" role="menu">
+          <div class="dropdown-menu animate__animated animate__fadeIn" role="menu">
             <div class="dropdown-content">
               <div class="dropdown-item"></div>
               ${user.isAdmin ? '<a class="dropdown-item" id="davs-dav-edit-' + dav.id + '"><i class="fas fa-edit"></i><strong> Edit</strong></a>' : ""}

web/components/davs/edit.js

@@ -21,7 +21,7 @@ export class Edit {
     this.user = await Auth.GetUser();
     this.editModal = document.createElement("div");
     this.editModal.classList.add("modal", "is-active");
-    this.editModal.classList.add("animate__animated", "animate__fadeIn", "animate__faster");
+    this.editModal.classList.add("animate__animated", "animate__fadeIn");
     let content;
     try {
       const response = await fetch(this.url, {

web/components/davs/explorer.js

@@ -120,7 +120,7 @@ export class Explorer {
 
   fileTemplate(file) {
     return /* HTML */ `
-      <article id="file-${file.id}-content" class="media animate__animated animate__fadeIn animate__faster">
+      <article id="file-${file.id}-content" class="media animate__animated animate__fadeIn">
         <figure class="media-left">
           ${file.type.includes("image")
             ? `<p class="image is-48x48"><img id="file-${file.id}-image" src="assets/spinner.svg"/></p>`
@@ -256,7 +256,7 @@ export class Explorer {
 
   rename(file) {
     let renameModal = document.createElement("div");
-    renameModal.classList.add("modal", "animate__animated", "animate__fadeIn", "animate__faster", "is-active");
+    renameModal.classList.add("modal", "animate__animated", "animate__fadeIn", "is-active");
     renameModal.innerHTML = /* HTML */ `
       <div class="modal-background"></div>
       <div class="modal-content">
@@ -326,7 +326,7 @@ export class Explorer {
 
   moveOrCopy(file, isCopy) {
     let pasteControl = document.createElement("div");
-    pasteControl.classList.add("field", "has-addons", "animate__animated", "animate__zoomIn", "animate__faster", "is-active");
+    pasteControl.classList.add("field", "has-addons", "animate__animated", "animate__zoomIn", "is-active");
     pasteControl.innerHTML = /* HTML */ `
       <a class="button is-link">
         <span class="icon is-small">
@@ -450,7 +450,7 @@ export class Explorer {
         <div class="content"><p>${file.name} (file: ${fileIdx}/${files.length})</p></div>
         <progress class="progress is-primary is-small" value="0" max="100" style="margin-bottom: 0px;"></progress>
       `;
-      msg.classList.add("is-info", "notification", "uploader", "animate__animated", "animate__fadeInUp", "animate__faster");
+      msg.classList.add("is-info", "notification", "uploader", "animate__animated", "animate__fadeInUp");
       const delBtn = document.createElement("button");
       let xhr = new XMLHttpRequest();
       // track upload progress

web/components/davs/open.js

@@ -40,7 +40,7 @@ export class Open {
     this.user = await Auth.GetUser();
     this.openModal = document.createElement("div");
     this.openModal.classList.add("modal", "is-active");
-    if (animated) this.openModal.classList.add("animate__animated", "animate__fadeIn", "animate__faster");
+    if (animated) this.openModal.classList.add("animate__animated", "animate__fadeIn");
     let content;
     let token;
     if (this.type == "text") {

web/components/davs/share.js

@@ -20,7 +20,7 @@ export class Share {
   async show() {
     this.user = await Auth.GetUser();
     let shareModal = document.createElement("div");
-    shareModal.classList.add("modal", "animate__animated", "animate__fadeIn", "animate__faster", "is-active");
+    shareModal.classList.add("modal", "animate__animated", "animate__fadeIn", "is-active");
     shareModal.innerHTML = /* HTML */ `
       <div class="modal-background"></div>
       <div class="modal-content">
@@ -75,7 +75,7 @@ export class Share {
         const shareToken = await response.text();
         // Create result modal
         let resultModal = document.createElement("div");
-        resultModal.classList.add("modal", "animate__animated", "animate__fadeIn", "animate__faster", "is-active");
+        resultModal.classList.add("modal", "animate__animated", "animate__fadeIn", "is-active");
         resultModal.innerHTML = /* HTML */ `
           <div class="modal-background"></div>
           <div class="modal-content">

web/index.html

@@ -7,6 +7,11 @@
   <link rel="manifest" href="assets/brand/manifest.json" />
   <link rel="stylesheet" href="assets/bulma.min.css" />
   <link rel="stylesheet" href="assets/animate.css" />
+  <style>
+    :root {
+      --animate-duration: 0.25s;
+    }
+  </style>
   <script defer src="assets/fontawesome/solid.min.js"></script>
   <script defer src="assets/fontawesome/fontawesome.min.js"></script>
   <script defer type="module" src="main.js"></script>
@@ -70,7 +75,7 @@
       </div>
       <div class="navbar-menu">
         <div class="navbar-end">
-          <div class="navbar-item"><p>v4.3.23</p></div>
+          <div class="navbar-item"><p>v4.3.24</p></div>
         </div>
       </div>
     </nav>

web/main.js

@@ -55,14 +55,15 @@ async function load(element, domAlteration) {
   AnimateCSS(element, "animate__fadeOut", async function () {
     element.classList.add("is-hidden");
     spinner.classList.remove("is-hidden");
-    AnimateCSS(spinner, "animate__fadeIn");
-    if (typeof domAlteration === "function") {
-      await domAlteration();
-      AnimateCSS(spinner, "animate__fadeOut", function () {
-        spinner.classList.add("is-hidden");
-      });
-      element.classList.remove("is-hidden");
-      AnimateCSS(element, "animate__fadeIn");
-    }
+    AnimateCSS(spinner, "animate__fadeIn", async () => {
+      if (typeof domAlteration === "function") {
+        await domAlteration();
+        AnimateCSS(spinner, "animate__fadeOut", () => {
+          spinner.classList.add("is-hidden");
+          element.classList.remove("is-hidden");
+          AnimateCSS(element, "animate__fadeIn");
+        });
+      }
+    });
   });
 }

web/services/common/common.js

 export function AnimateCSS(el, animationName, callback) {
-  el.classList.add("animate__animated", "animate__faster", animationName);
+  el.classList.add("animate__animated", animationName);
   function handleAnimationEnd() {
-    el.classList.remove("animate__animated", "animate__faster", animationName);
+    el.classList.remove("animate__animated", animationName);
     el.removeEventListener("animationend", handleAnimationEnd);
     if (typeof callback === "function") callback();
   }

web/services/common/delete.js

@@ -4,7 +4,7 @@ import { AnimateCSS } from "/services/common/common.js";
 export class Delete {
   constructor(okFunction) {
     let deleteModal = document.createElement("div");
-    deleteModal.classList.add("modal", "animate__animated", "animate__fadeIn", "animate__faster", "is-active");
+    deleteModal.classList.add("modal", "animate__animated", "animate__fadeIn", "is-active");
     deleteModal.innerHTML = /* HTML */ `
       <div class="modal-background"></div>
       <div class="modal-content">

web/services/messages/messages.js

@@ -10,7 +10,7 @@ export function Show(bulmaClass, message) {
     let msg = document.createElement("div");
     msg.style.marginBottom = offset.toString() + "px";
     msg.innerText = message;
-    msg.classList.add("notification", "animate__animated", "animate__fadeInUp", "animate__faster");
+    msg.classList.add("notification", "animate__animated", "animate__fadeInUp");
     msg.classList.add(bulmaClass);
     const delBtn = document.createElement("button");
     delBtn.classList.add("delete");