From 23943e115b7c718402c487f5337a9d230c8aa24e Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Mon, 23 Dec 2019 00:23:47 +0100
Subject: [PATCH] fix: remove Ripple effects without waiting for the mouseUp
 event

---
 client/src/components/Ripple.vue | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Ripple.vue b/client/src/components/Ripple.vue
index 8ed1039..1482613 100644
--- a/client/src/components/Ripple.vue
+++ b/client/src/components/Ripple.vue
@@ -1,10 +1,5 @@
 <template>
-  <div
-    ref="container"
-    @mousedown="addRipple"
-    class="relative overflow-hidden cursor-pointer"
-  >
-
+  <div ref="container" @mousedown="addRipple" class="relative overflow-hidden cursor-pointer">
     <transition-group
       class="absolute top-0 left-0 w-full h-full pointer-events-none"
       name="grow"
@@ -49,12 +44,6 @@ export default {
     const height = this.$refs.container.offsetHeight
     this.rippleWidth = width > height ? width : height
     this.halfRippleWidth = this.rippleWidth / 2
-
-    window.addEventListener('mouseup', this.purgeRipples)
-  },
-
-  beforeDestroy() {
-    window.removeEventListener('mouseup', this.purgeRipples)
   },
 
   methods: {
@@ -68,6 +57,11 @@ export default {
         top: `${e.clientY - top - this.halfRippleWidth}px`,
         id: rippleId
       })
+
+      // Remove ripple
+      setTimeout(() => {
+        this.ripples = this.ripples.filter(r => r.id !== rippleId)
+      }, 400)
     },
     purgeRipples() {
       this.ripples = []