From 8fb8f273c597f4544e2b4e789bed58ebcf2a7a46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fatih=20Kadir=20Ak=C4=B1n?= <fatihkadirakin@gmail.com>
Date: Fri, 8 Jun 2018 11:25:25 +0300
Subject: [PATCH] basic delay

---
 examples/vue-example/main.vue |  4 ++--
 src/components/v-wait.vue     | 32 ++++++++++++++++++++++++++++++--
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/examples/vue-example/main.vue b/examples/vue-example/main.vue
index 9ff4ab9..b64a9a6 100644
--- a/examples/vue-example/main.vue
+++ b/examples/vue-example/main.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <div class="container">
-      <v-wait message='Something loading! Lovely...'>
+      <v-wait message='Something loading! Lovely...' :delay=2000>
         <template slot='waiting'>
           <span class="animated">❤️</span>
         </template>
@@ -32,7 +32,7 @@
     </p>
     <ul class="list">
       <li v-for='loader in loaders' :key='loader + Math.random()' v-wait:toggle='loader'>
-        <v-wait :for='loader'>
+        <v-wait :for='loader' :delay=2000>
           <template slot='waiting' v-if='loader == "c"'>
             <span class="animated">🎉</span>
           </template>
diff --git a/src/components/v-wait.vue b/src/components/v-wait.vue
index ebb02d3..4480c86 100644
--- a/src/components/v-wait.vue
+++ b/src/components/v-wait.vue
@@ -1,10 +1,11 @@
 <template lang="html">
   <div>
-    <span v-if='isWaiting'>
+    <span v-if='isWaiting || isDelaying'>
       <slot name='waiting'></slot>
       <span v-if='message'>{{ message }}</span>
     </span>
-    <slot v-if='!isWaiting'></slot>
+    <slot v-else></slot>
+    <span>{{ isDelaying }}</span>
   </div>
 </template>
 <script>
@@ -13,6 +14,33 @@
       visible: Boolean,
       for: String,
       message: String,
+      delay: {
+        type: Number,
+        default: 0,
+      },
+    },
+    data() {
+      return {
+        delayTimer: null,
+        isDelaying: false,
+      };
+    },
+    watch: {
+      isDelaying() {
+        console.log(this.delay);
+      },
+      isWaiting(isWaiting, wasWaiting) {
+        const notWaitingToWaiting = !isWaiting && wasWaiting;
+        const endDelay = () => {
+          this.isDelaying = false;
+          clearTimeout(this.delayTimer);
+        };
+        endDelay();
+        if (this.delay > 0 && notWaitingToWaiting) {
+          this.isDelaying = true;
+          this.delayTimer = setTimeout(endDelay, this.delay);
+        }
+      },
     },
     computed: {
       isWaiting() {