From 8ae2a1bc910356638eb4085e640691f679092b26 Mon Sep 17 00:00:00 2001
From: Alexander Drozdov <snosme@gmail.com>
Date: Tue, 12 Jan 2021 19:30:10 +0200
Subject: [PATCH] loading

---
 package.json                         |  1 +
 src/web/overlay/LoadingAnimation.vue | 78 ++++++++++++++++++++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 src/web/overlay/LoadingAnimation.vue

diff --git a/package.json b/package.json
index 6a2a687b..e0e0080e 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
   "main": "background.js",
   "dependencies": {
     "@fortawesome/fontawesome-free": "5.14.x",
+    "animate.css": "^4.1.1",
     "dot-prop": "6.x.x",
     "electron-overlay-window": "1.0.x",
     "electron-store": "6.0.x",
diff --git a/src/web/overlay/LoadingAnimation.vue b/src/web/overlay/LoadingAnimation.vue
new file mode 100644
index 00000000..b74f9d96
--- /dev/null
+++ b/src/web/overlay/LoadingAnimation.vue
@@ -0,0 +1,78 @@
+<template>
+  <transition
+    enter-active-class="animate__animated animate__fadeIn"
+    leave-active-class="animate__animated animate__backOutDown">
+    <div :class="$style.widget" v-if="show">
+      <div :class="$style.box">
+        <div class="py-2 px-4">
+          <div class="text-base">Awakened PoE Trade</div>
+          <p>{{ t('Is ready and running in background') }}</p>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+export default {
+  setup () {
+    const show = ref(false)
+
+    // @TODO
+    setTimeout(() => {
+      show.value = true
+      setTimeout(() => { show.value = false }, 2500)
+    }, 1000)
+
+    const { t } = useI18n()
+
+    return {
+      t,
+      show
+    }
+  }
+}
+</script>
+
+<style lang="postcss" module>
+.widget {
+  position: absolute;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  bottom: 20%;
+}
+
+.box {
+  position: relative;
+  display: flex;
+  @apply bg-gray-800;
+  @apply text-gray-100;
+  @apply rounded;
+  box-shadow: 0px 0px 1px 2px rgb(255 255 255 / 20%);
+}
+
+.box::before {
+  position: absolute;
+  content: '';
+  background: url('~@/assets/images/TransferOrb.png') no-repeat top right/contain;
+  right: 100%;
+  width: 100%;
+  height: 100%;
+  max-width: 78px;
+  @apply mr-2;
+  pointer-events: none;
+  filter: drop-shadow(2px 4px 6px #000);
+}
+</style>
+
+<i18n>
+{
+  "ru": {
+    "Is ready and running in background": "Запущен и работает в фоновом режиме"
+  }
+}
+</i18n>