Debounced resource up/down with optimistic ui

app/imports/client/ui/components/global/SmartBtn.vue

@@ -3,7 +3,7 @@
     v-bind="$attrs"
     :disabled="isDisabled"
     :loading="loading"
-    @click="click"
+    @click.stop="click"
   >
     <slot />
   </v-btn>
@@ -41,7 +41,7 @@ export default {
       } else if (Number.isFinite(this.context.debounceTime)){
         return this.context.debounceTime;
       } else {
-        return 750;
+        return 400;
       }
     },
   },
@@ -62,11 +62,12 @@ export default {
       this.$emit('click', this.acknowledgeChange);
     },
     clicks() {
+      if (!this.$listeners?.clicks) return;
       this.loading = true;
       this.$emit('clicks', this.timesClicked, this.acknowledgeChange);
       this.timesClicked = 0;
     },
-    acknowledgeChange(error){
+    acknowledgeChange(error) {      
       this.loading = false;
       if (error) {
         console.error(error)

app/imports/client/ui/creature/character/characterSheetTabs/StatsTab.vue

@@ -600,13 +600,15 @@ export default {
         data: { _id },
       });
     },
-    incrementChange(_id, { type, value }) {
+    incrementChange(_id, { type, value, ack }) {
       damageProperty.call({
         _id,
         operation: type,
         value: -value
       }, error => {
-        if (error) {
+        if (ack) {
+          ack(error);
+        } else if (error) {
           snackbar({ text: error.reason || error.message || error.toString() });
           console.error(error);
         }

app/imports/client/ui/properties/components/attributes/ResourceCardContent.vue

@@ -1,26 +1,28 @@
 <template>
   <v-layout>
     <div class="buttons layout column justify-center pl-3">
-      <v-btn
+      <smart-btn
         icon
         small
-        :disabled="(model.value >= model.total && !model.ignoreUpperLimit) || context.editPermission === false"
-        @click="increment(1)"
+        :disabled="(optimisticValue >= model.total && !model.ignoreUpperLimit) || context.editPermission === false"
+        @clicks="(times, ack) => increment(times, ack)"
+        @click="optimisticIncrement += 1"
       >
         <v-icon>mdi-chevron-up</v-icon>
-      </v-btn>
-      <v-btn
+      </smart-btn>
+      <smart-btn
         icon
         small
-        :disabled="(model.value <= 0 && !model.ignoreLowerLimit) || context.editPermission === false"
-        @click="increment(-1)"
+        :disabled="(optimisticValue <= 0 && !model.ignoreLowerLimit) || context.editPermission === false"
+        @clicks="(times, ack) => increment(-1 * times, ack)"
+        @click="optimisticIncrement -= 1"
       >
         <v-icon>mdi-chevron-down</v-icon>
-      </v-btn>
+      </smart-btn>
     </div>
     <div class="layout align-center value pl-2 pr-3">
       <div class="text-h4">
-        {{ model.value }}
+        {{ optimisticValue }}
       </div>
       <div
         v-if="model.total !== 0"
@@ -57,12 +59,27 @@ export default {
       type: Boolean,
     }
   },
+  data(){
+    return {
+      optimisticIncrement: 0,
+    };
+  },
+  computed: {
+    optimisticValue() {
+      return this.model?.value + this.optimisticIncrement;
+    },
+  },
+  watch: {
+    'model.value'() {
+      this.optimisticIncrement = 0;
+    },
+  },
   methods: {
     click(e) {
       this.$emit('click', e);
     },
-    increment(value) {
-      this.$emit('change', { type: 'increment', value })
+    increment(value, ack) {
+      this.$emit('change', { type: 'increment', value, ack })
     },
   },
 };