buttons animations

Former-commit-id: 7c32637982be8af78d41c5610405694689c8df55 [formerly 461b2f1d4556df9ef36ebac39e0a269aad57cce1] [formerly 071f6ef97283c1e5c0ebac49fda747fa77f6a539 [formerly f9699f174d]]
Former-commit-id: a052df2da3d1dc23311e69ffd8d058567fa9bd3b [formerly ebdbc05a6bd049a2479b850b23c7e2ffa7a5ba5f]
Former-commit-id: 56066e9d06059f6dbfc87e28a7bd8406bff06a5d

_assets/src/utils/buttons.js

@@ -0,0 +1,54 @@
+function loading (button) {
+  let el = document.querySelector(`#${button}-button > i`)
+
+  if (el === undefined || el === null) {
+    console.log('Error getting button ' + button)
+    return
+  }
+
+  el.dataset.icon = el.innerHTML
+  el.style.opacity = 0
+
+  setTimeout(() => {
+    el.classList.add('spin')
+    el.innerHTML = 'autorenew'
+    el.style.opacity = 1
+  }, 200)
+}
+
+function done (button, success = true) {
+  let el = document.querySelector(`#${button}-button > i`)
+
+  if (el === undefined || el === null) {
+    console.log('Error getting button ' + button)
+    return
+  }
+
+  el.style.opacity = 0
+
+  let third = () => {
+    el.innerHTML = el.dataset.icon
+    el.style.opacity = null
+  }
+
+  let second = () => {
+    el.style.opacity = 0
+    setTimeout(third, 200)
+  }
+
+  let first = () => {
+    el.classList.remove('spin')
+    el.innerHTML = success
+      ? 'done'
+      : 'close'
+    el.style.opacity = 1
+    setTimeout(second, 200)
+  }
+
+  setTimeout(first, 200)
+}
+
+export default {
+  loading,
+  done
+}