Added debounce.js

web/src/utils/debounce.js

@@ -0,0 +1,9 @@
+export function debounce(func, timeout = 500) {
+  let timer
+  return (...args) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      func.apply(this, args)
+    }, timeout)
+  }
+}

web/src/views/UserPresence.vue

@@ -269,6 +269,7 @@
 <script>
 import gql from 'graphql-tag'
 import Avatar from '../components/Avatar'
+import { debounce } from '../utils/debounce'
 
 export default {
   name: 'UserPresence',
@@ -291,11 +292,11 @@ export default {
   },
 
   watch: {
-    search(newValue) {
-      if (this.$route.query.search != newValue) this.updateQuery()
+    search() {
+      this.updateQuery()
     },
-    onlyServants(newValue) {
-      if (this.$route.query.onlyServants != newValue) this.updateQuery()
+    onlyServants() {
+      this.updateQuery()
     }
   },
   mounted() {
@@ -362,12 +363,14 @@ export default {
       }[status]
     },
     updateQuery() {
+      debounce(() =>
         this.$router.replace({
           query: {
-          search: this.search,
-          onlyServants: this.onlyServants
+            search: this.search || undefined,
+            onlyServants: this.onlyServants || undefined
           }
         })
+      )()
     }
   }
 }