diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9109335321..f4480bc75d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,10 @@
 
 ### Fixes
 
+* Registering duplicate icon is no longer breaking the build.
+* Fix widget focus state so that the in-context Add Content menu stays visible during animation
+* Fix UI of areas in schemas so that their context menus are layered overtop sibling schema fields UI
+* Fix unhandled promise rejections and guard against potential memory leaks, remove 3rd party `debounce-async` dependency
 * Adds an option to center the context menu arrow on the button icon. Sets this new option on some context menus in the admin UI.
 
 ## 4.6.1 (2024-08-26)
diff --git a/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBar.vue b/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBar.vue
index 74ddcf42ba..917e125767 100644
--- a/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBar.vue
+++ b/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBar.vue
@@ -720,14 +720,18 @@ export default {
     async updateDraftIsEditable() {
       if (this.context.aposLocale && this.context.aposLocale.endsWith('published') && !this.context._edit) {
         // A contributor might be able to edit the draft
-        const draftContext = await apos.http.get(`${this.action}/${this.context._id}`, {
-          busy: true,
-          qs: {
-            aposMode: 'draft',
-            aposLocale: this.context.aposLocale.split(':')[0]
-          }
-        });
-        this.draftIsEditable = draftContext && draftContext._edit;
+        try {
+          const draftContext = await apos.http.get(`${this.action}/${this.context._id}`, {
+            busy: true,
+            qs: {
+              aposMode: 'draft',
+              aposLocale: this.context.aposLocale.split(':')[0]
+            }
+          });
+          this.draftIsEditable = draftContext && draftContext._edit;
+        } catch (e) {
+          console.error(e);
+        }
       }
     },
     async getPublished() {
@@ -735,13 +739,17 @@ export default {
       const manuallyPublished = moduleOptions.localized && !this.autopublish;
       if (manuallyPublished && this.context.lastPublishedAt) {
         const action = window.apos.modules[this.context.type].action;
-        const doc = await apos.http.get(`${action}/${this.context._id}`, {
-          busy: true,
-          qs: {
-            aposMode: 'published'
-          }
-        });
-        return doc;
+        try {
+          const doc = await apos.http.get(`${action}/${this.context._id}`, {
+            busy: true,
+            qs: {
+              aposMode: 'published'
+            }
+          });
+          return doc;
+        } catch (error) {
+          console.error(error);
+        }
       }
       return null;
     },
diff --git a/modules/@apostrophecms/image/ui/apos/components/AposImageCropper.vue b/modules/@apostrophecms/image/ui/apos/components/AposImageCropper.vue
index b15d19f342..73f5db845a 100644
--- a/modules/@apostrophecms/image/ui/apos/components/AposImageCropper.vue
+++ b/modules/@apostrophecms/image/ui/apos/components/AposImageCropper.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import { debounce } from 'Modules/@apostrophecms/ui/utils';
+import debounce from 'lodash/debounce';
 import { Cropper } from 'vue-advanced-cropper';
 import 'vue-advanced-cropper/dist/style.css';
 
@@ -129,6 +129,10 @@ export default {
     };
   },
   beforeUnmount() {
+    this.onScreenResizeDebounced.cancel();
+    this.handleCropperChangeDebounced.cancel();
+    this.setCropperCoordinatesDebounced.cancel();
+    this.updateFocalPointCoordinatesDebounced.cancel();
     this.$refs.focalPoint.removeEventListener('mousedown', this.onFocalPointMouseDown);
     window.removeEventListener('resize', this.onScreenResizeDebounced);
   },
diff --git a/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue b/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue
index 3cc2c41bdb..7d7add4c4f 100644
--- a/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue
+++ b/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue
@@ -125,10 +125,10 @@
 </template>
 
 <script>
-import { debounce } from 'Modules/@apostrophecms/ui/utils';
+import { createId } from '@paralleldrive/cuid2';
+import { debounceAsync } from 'Modules/@apostrophecms/ui/utils';
 import AposModifiedMixin from 'Modules/@apostrophecms/ui/mixins/AposModifiedMixin';
 import AposDocsManagerMixin from 'Modules/@apostrophecms/modal/mixins/AposDocsManagerMixin';
-import { createId } from '@paralleldrive/cuid2';
 
 const DEBOUNCE_TIMEOUT = 500;
 
@@ -166,7 +166,9 @@ export default {
         emoji: '🖼'
       },
       cancelDescription: 'apostrophe:discardImageChangesPrompt',
-      debouncedGetMedia: debounce(this.getMedia, DEBOUNCE_TIMEOUT),
+      debouncedGetMedia: debounceAsync(this.getMedia, DEBOUNCE_TIMEOUT, {
+        onSuccess: this.appendMedia
+      }),
       loadObserver: new IntersectionObserver(
         this.handleIntersect,
         {
@@ -243,6 +245,7 @@ export default {
       return this.totalPages > 1 && this.currentPage === this.totalPages;
     }
   },
+
   watch: {
     async checked (newVal, oldVal) {
       this.lastSelected = newVal.at(-1);
@@ -270,21 +273,26 @@ export default {
       }
     }
   },
+
   created() {
     this.setDefaultFilters();
   },
+
   async mounted() {
     this.modal.active = true;
-    await this.getMedia({ tags: true });
-    this.isFirstLoading = false;
-
+    // Do these before any async work or they might get added after they are "removed"
     apos.bus.$on('content-changed', this.onContentChanged);
     apos.bus.$on('command-menu-manager-close', this.confirmAndCancel);
+    await this.debouncedGetMedia.skipDelay({ tags: true });
+    this.isFirstLoading = false;
   },
-  unmounted() {
+
+  beforeUnmount() {
+    this.debouncedGetMedia.cancel();
     apos.bus.$off('content-changed', this.onContentChanged);
     apos.bus.$off('command-menu-manager-close', this.confirmAndCancel);
   },
+
   methods: {
     setDefaultFilters() {
       this.moduleOptions.filters.forEach(filter => {
@@ -296,7 +304,8 @@ export default {
     editorModified (val) {
       this.modified = val;
     },
-    async getMedia (options = {}) {
+    async getMedia(options = {}) {
+      const result = {};
       const qs = {
         ...this.filterValues,
         page: this.currentPage,
@@ -344,23 +353,37 @@ export default {
               draft: true
             }
           ));
-          this.tagList = apiResponse.choices._tags;
+          result.tagList = apiResponse.choices._tags;
         } else {
-          this.tagList = apiResponse.choices ? apiResponse.choices._tags : [];
+          result.tagList = apiResponse.choices ? apiResponse.choices._tags : [];
         }
       }
 
-      this.currentPage = apiResponse.currentPage;
-      this.totalPages = apiResponse.pages;
+      result.currentPage = apiResponse.currentPage;
+      result.totalPages = apiResponse.pages;
+      result.items = [];
       for (const image of apiResponse.results) {
-        this.items.push(image);
+        result.items.push(image);
+      }
+      return result;
+    },
+    async appendMedia({
+      tagList, currentPage, totalPages, items
+    }) {
+      if (Array.isArray(tagList)) {
+        this.tagList = tagList;
+      }
+      this.currentPage = currentPage;
+      this.totalPages = totalPages;
+      for (const item of items) {
+        this.items.push(item);
       }
     },
     async refetchMedia(opts) {
       this.isLoading = true;
       this.currentPage = 1;
       this.items = [];
-      await this.getMedia(opts);
+      await this.debouncedGetMedia.skipDelay(opts);
       this.isLoading = false;
       this.modified = false;
       this.updateEditing(null);
@@ -376,11 +399,10 @@ export default {
         dimensions
       });
     },
-    async completeUploading (imgIds) {
+    async completeUploading(imgIds) {
       this.currentPage = 1;
       this.items = [];
-      await this.getMedia();
-
+      await this.debouncedGetMedia.skipDelay();
       if (Array.isArray(imgIds) && imgIds.length && this.items.length === 0) {
         const [ widgetOptions = {} ] = apos.area.widgetOptions;
         const [ width, height ] = widgetOptions.minSize || [];
@@ -551,7 +573,7 @@ export default {
           this.loadRef.scrollIntoView({
             behavior: 'smooth'
           });
-          await this.getMedia();
+          await this.debouncedGetMedia.skipDelay();
           this.isScrollLoading = false;
         }
       }
diff --git a/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue b/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
index eb178734e4..c26f6870de 100644
--- a/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
+++ b/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
@@ -84,7 +84,7 @@
               disableUnchecked: maxReached()
             }"
             @select-click="selectAll"
-            @search="onSearch"
+            @search="onSearchDebounced"
             @page-change="updatePage"
             @filter="filter"
             @batch="handleBatchAction"
@@ -129,7 +129,7 @@ import AposDocsManagerMixin from 'Modules/@apostrophecms/modal/mixins/AposDocsMa
 import AposModifiedMixin from 'Modules/@apostrophecms/ui/mixins/AposModifiedMixin';
 import AposPublishMixin from 'Modules/@apostrophecms/ui/mixins/AposPublishMixin';
 import { useModalStore } from 'Modules/@apostrophecms/ui/stores/modal';
-import { debounce } from 'Modules/@apostrophecms/ui/utils';
+import { debounceAsync } from 'Modules/@apostrophecms/ui/utils';
 
 export default {
   name: 'AposDocsManager',
@@ -229,7 +229,9 @@ export default {
   },
   created() {
     const DEBOUNCE_TIMEOUT = 500;
-    this.onSearch = debounce(this.search, DEBOUNCE_TIMEOUT);
+    this.onSearchDebounced = debounceAsync(this.onSearch, DEBOUNCE_TIMEOUT, {
+      onSuccess: this.search
+    });
 
     this.moduleOptions.filters.forEach(filter => {
       this.filterValues[filter.name] = filter.def;
@@ -244,14 +246,17 @@ export default {
     this.headers = this.computeHeaders();
     // Get the data. This will be more complex in actuality.
     this.modal.active = true;
-    await this.getPieces();
-    await this.getAllPiecesTotal();
+    await this.managePieces();
+    await this.manageAllPiecesTotal();
     this.modal.triggerFocusRefresh++;
 
     apos.bus.$on('content-changed', this.onContentChanged);
     apos.bus.$on('command-menu-manager-create-new', this.create);
     apos.bus.$on('command-menu-manager-close', this.confirmAndCancel);
   },
+  onBeforeUnmount() {
+    this.onSearchDebounced.cancel();
+  },
   unmounted() {
     this.destroyShortcuts();
     apos.bus.$off('content-changed', this.onContentChanged);
@@ -262,7 +267,6 @@ export default {
     async create() {
       await this.edit(null);
     },
-
     // If pieceOrId is null, a new piece is created
     async edit(pieceOrId) {
       let piece;
@@ -294,9 +298,9 @@ export default {
       });
     },
     async finishSaved() {
-      await this.getPieces();
+      await this.managePieces();
     },
-    async request (mergeOptions) {
+    async request(mergeOptions) {
       const options = {
         ...this.filterValues,
         ...this.queryExtras,
@@ -325,31 +329,65 @@ export default {
         draft: true
       });
     },
-    async getPieces () {
-      if (this.holdQueries) {
-        return;
-      }
-
-      this.holdQueries = true;
-
+    async requestPieces(page = 1, mergeOptions = {}) {
       const {
         currentPage, pages, results, choices
       } = await this.request({
+        ...mergeOptions,
         ...(
           this.moduleOptions.managerApiProjection &&
           { project: this.moduleOptions.managerApiProjection }
         ),
-        page: this.currentPage
+        page
       });
 
-      this.currentPage = currentPage;
-      this.totalPages = pages;
-      this.items = results;
-      this.filterChoices = choices;
-      this.holdQueries = false;
+      return {
+        currentPage,
+        pages,
+        results,
+        choices
+      };
     },
-    async getAllPiecesTotal () {
+    async requestAllPiecesTotal() {
       const { count: total } = await this.request({ count: 1 });
+      return total;
+    },
+    async requestData(page = 1, mergeOptions = {}) {
+      const pieces = await this.requestPieces(page, mergeOptions);
+      const total = await this.requestAllPiecesTotal();
+
+      return {
+        ...pieces,
+        total
+      };
+    },
+    setPieces(data) {
+      this.currentPage = data.currentPage;
+      this.totalPages = data.pages;
+      this.items = data.results;
+      this.filterChoices = data.choices;
+    },
+    async managePieces () {
+      if (this.holdQueries) {
+        return;
+      }
+
+      this.holdQueries = true;
+
+      const {
+        currentPage, pages, results, choices
+      } = await this.requestPieces(this.currentPage);
+
+      this.setPieces({
+        currentPage,
+        pages,
+        results,
+        choices
+      });
+      this.holdQueries = false;
+    },
+    async manageAllPiecesTotal () {
+      const total = await this.requestAllPiecesTotal();
 
       this.setAllPiecesSelection({
         isSelected: false,
@@ -372,25 +410,44 @@ export default {
         docs
       });
     },
-    updatePage(num) {
+    async updatePage(num) {
       if (num) {
         this.currentPage = num;
-        this.getPieces();
+        await this.managePieces();
       }
     },
-    async search(query) {
+    // A stateless search handler, only requesting the data.
+    // It's meant to be debounced and used in conjunction with the search
+    // method that actually updates the state.
+    async onSearch(query) {
+      const queryExtras = { ...this.queryExtras };
       if (query) {
-        this.queryExtras.autocomplete = query;
+        queryExtras.autocomplete = query;
       } else if ('autocomplete' in this.queryExtras) {
-        delete this.queryExtras.autocomplete;
+        queryExtras.autocomplete = undefined;
       } else {
+        return {};
+      }
+      const { total, ...pieces } = await this.requestData(1, queryExtras);
+
+      return {
+        pieces,
+        total
+      };
+    },
+    async search({ pieces, total }) {
+      // Most probably due to empty/invalid query.
+      if (!pieces) {
         return;
       }
 
       this.currentPage = 1;
 
-      await this.getPieces();
-      await this.getAllPiecesTotal();
+      this.setPieces(pieces);
+      this.setAllPiecesSelection({
+        isSelected: false,
+        total
+      });
     },
     async filter(filter, value) {
       if (this.filterValues[filter] === value) {
@@ -400,8 +457,8 @@ export default {
       this.filterValues[filter] = value;
       this.currentPage = 1;
 
-      await this.getPieces();
-      await this.getAllPiecesTotal();
+      await this.managePieces();
+      await this.manageAllPiecesTotal();
       this.headers = this.computeHeaders();
 
       this.setCheckedDocs([]);
@@ -477,8 +534,8 @@ export default {
             }
           });
           if (action === 'archive') {
-            await this.getPieces();
-            this.getAllPiecesTotal();
+            await this.managePieces();
+            await this.manageAllPiecesTotal();
             this.checked = [];
           }
         } catch (error) {
@@ -496,15 +553,14 @@ export default {
         return item._id;
       });
     },
-
     async onContentChanged({ doc, action }) {
       if (
         !doc ||
         !doc.aposLocale ||
         doc.aposLocale.split(':')[0] === this.modalData.locale
       ) {
-        await this.getPieces();
-        this.getAllPiecesTotal();
+        await this.managePieces();
+        await this.manageAllPiecesTotal();
         if (action === 'archive') {
           this.checked = this.checked.filter(checkedId => doc._id !== checkedId);
         }
diff --git a/modules/@apostrophecms/schema/ui/apos/logic/AposInputSlug.js b/modules/@apostrophecms/schema/ui/apos/logic/AposInputSlug.js
index 8323f9a4ca..c9c85051fc 100644
--- a/modules/@apostrophecms/schema/ui/apos/logic/AposInputSlug.js
+++ b/modules/@apostrophecms/schema/ui/apos/logic/AposInputSlug.js
@@ -1,10 +1,10 @@
 // NOTE: This is a temporary component, copying AposInputString. Base modules
 // already have `type: 'slug'` fields, so this is needed to avoid distracting
 // errors.
-import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
-import sluggo from 'sluggo';
-import debounce from 'debounce-async';
 import { klona } from 'klona';
+import sluggo from 'sluggo';
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
+import { debounceAsync } from 'Modules/@apostrophecms/ui/utils';
 
 export default {
   name: 'AposInputSlug',
@@ -102,12 +102,17 @@ export default {
     }
   },
   async mounted() {
-    this.debouncedCheckConflict = debounce(() => this.checkConflict(), 250);
+    this.debouncedCheckConflict = debounceAsync(this.requestCheckConflict, 250, {
+      onSuccess: this.setConflict
+    });
     if (this.next.length) {
-      await this.debouncedCheckConflict();
+      await this.debouncedCheckConflict.skipDelay();
     }
     this.originalParentSlug = this.getParentSlug(this.next);
   },
+  onBeforeUnmount() {
+    this.debouncedCheckConflict.cancel();
+  },
   methods: {
     getParentSlug(slug = '') {
       return slug.slice(-1) === '/'
@@ -117,15 +122,7 @@ export default {
     async watchNext() {
       this.next = this.slugify(this.next);
       this.validateAndEmit();
-      try {
-        await this.debouncedCheckConflict();
-      } catch (e) {
-        if (e === 'canceled') {
-          // That's fine
-        } else {
-          throw e;
-        }
-      }
+      await this.debouncedCheckConflict();
     },
     validate(value) {
       if (this.conflict) {
@@ -231,7 +228,7 @@ export default {
 
       return updated;
     },
-    async checkConflict() {
+    async requestCheckConflict() {
       let slug;
       try {
         slug = this.next;
@@ -243,31 +240,37 @@ export default {
             },
             draft: true
           });
+
           // Still relevant?
           if (slug === this.next) {
-            this.conflict = false;
-            this.validateAndEmit();
-          } else {
-            // Can ignore it, another request
-            // probably already in-flight
+            return false;
           }
+          // Should not happen, another request
+          // already in-flight shouldn't be possible now.
+          return null;
         }
       } catch (e) {
         // 409: Conflict (slug in use)
         if (e.status === 409) {
           // Still relevant?
           if (slug === this.next) {
-            this.conflict = true;
-            this.validateAndEmit();
-          } else {
-            // Can ignore it, another request
-            // probably already in-flight
+            return true;
           }
+          // Should not happen, another request
+          // already in-flight shouldn't be possible now.
+          return null;
         } else {
           throw e;
         }
       }
     },
+    async setConflict(result) {
+      if (result === null) {
+        return;
+      }
+      this.conflict = result;
+      this.validateAndEmit();
+    },
     passFocus() {
       this.$refs.input.focus();
     },
diff --git a/modules/@apostrophecms/ui/ui/apos/utils/index.js b/modules/@apostrophecms/ui/ui/apos/utils/index.js
index 21a32ac9c4..6631480e1e 100644
--- a/modules/@apostrophecms/ui/ui/apos/utils/index.js
+++ b/modules/@apostrophecms/ui/ui/apos/utils/index.js
@@ -1,53 +1,142 @@
 module.exports = {
-  debounce(fn, delay) {
-    let timer;
-    let previousDone = true;
-
-    const setTimer = (res, rej, args, delay) => {
-      return setTimeout(() => {
-        if (!previousDone) {
-          clearTimeout(timer);
-          timer = setTimer(res, rej, args, delay);
-          return;
-        }
-
-        previousDone = false;
-        const returned = fn.apply(this, args);
-        if (returned instanceof Promise) {
-          return returned
-            .then(res)
-            .catch(rej)
-            .finally(() => {
-              previousDone = true;
-            });
-        }
-
-        previousDone = true;
-        res(returned);
-      }, delay);
-    };
-
-    return (...args) => {
-      return new Promise((resolve, reject) => {
-        clearTimeout(timer);
-        timer = setTimer(resolve, reject, args, delay);
-      });
-    };
-  },
-
-  throttle(fn, delay) {
-    let inThrottle;
-
-    return (...args) => {
-      return new Promise((resolve) => {
-        if (!inThrottle) {
-          inThrottle = true;
-          setTimeout(() => {
-            inThrottle = false;
-            resolve(fn.apply(this, args));
-          }, delay);
-        }
-      });
-    };
-  }
+  debounceAsync,
+  // BC alias
+  debounce: debounceAsync,
+  throttle
 };
+
+// Debounce the async function "fn". For synchronous functions, use "lodash/debounce", not this function.
+//
+// Returns a debounced function that invokes "fn", but no more frequently than every "delay"
+// milliseconds and never while "fn" is already in progress.
+//
+// As always when debouncing, extra calls are discarded, however the most recent call
+// is guaranteed to result in a final invocation if not preempted by a new call, so you may
+// trust that the user's most recent input will eventually be sent etc.
+//
+// ### Avoiding race conditions with onSuccess
+//
+// Race conditions are a challenge. To avoid them, "fn" should have no side effects, and you should
+// pass a synchronous function that accepts the return value of "fn" as the "onSuccess" option.
+// The "onSuccess" function should then implement all needed side effects (e.g. changes to component
+// state, etc) when invoked. The debounced function has no return value when "onSuccess" is used.
+//
+// You can cancel the debounced function and cause all ongoing and any further invocations to be rejected by
+// calling the "cancel()" method attached to it.
+//
+// You can skip the initial delay for a particular invocation by calling the "skipDelay()" method
+// attached to the debounced function, passing any appropriate arguments for "fn" to "skipDelay" instead.
+// This is useful when immediate action is sometimes needed but you still want to use "onSuccess" in
+// a consistent manner and prevent race conditions.
+//
+// ### Detecting Cancellations
+//
+// If "onSuccess" is not provided, then after cancellation any invocations will be rejected
+// with an error such that "e.name === 'debounce.canceled'". Any other errors are passed through
+// as errors in the debounced function.
+//
+// If "onSuccess" is provided then all invocations of the debounced function resolve with "null".
+// If a rejection due to cancelation is detected ("e.name === 'debounce.canceled'") then
+// it will be "muted" internally. Howeever, if any other type of error occurs, it will be passed through,
+// resulting in a rejection of the debounced function.
+
+function debounceAsync(fn, delay, options = {}) {
+  const canceledRejection = new Error('debounce:canceled');
+  canceledRejection.name = 'debounce.canceled';
+  let timer;
+  let canceled = false;
+  let previousDone = true;
+  let skipNextDelay = false;
+
+  const setTimer = (res, rej, args, delay) => {
+    function body() {
+      if (canceled) {
+        return rej(canceledRejection);
+      }
+      if (!previousDone) {
+        clearTimeout(timer);
+        // At least 100ms delay to let current invocation finish
+        timer = setTimer(res, rej, args, delay || 100);
+        return;
+      }
+
+      previousDone = false;
+      const returned = fn.apply(this, args);
+      if (returned instanceof Promise) {
+        return returned
+          .then((result) => {
+            if (canceled) {
+              return rej(canceledRejection);
+            }
+            res(result);
+          })
+          .catch(rej)
+          .finally(() => {
+            previousDone = true;
+          });
+      }
+
+      previousDone = true;
+      res(returned);
+    }
+    return setTimeout(body, delay);
+  };
+
+  const wrapper = async (...args) => {
+    const promise = new Promise((resolve, reject) => {
+      if (canceled) {
+        return reject(canceledRejection);
+      }
+      if (skipNextDelay) {
+        skipNextDelay = false;
+        timer = setTimer(resolve, reject, args, 0);
+        return;
+      }
+      clearTimeout(timer);
+      timer = setTimer(resolve, reject, args, delay);
+    });
+
+    try {
+      const result = await promise;
+      if (options.onSuccess) {
+        await options.onSuccess(result);
+        return null;
+      }
+      return promise;
+    } catch (e) {
+      if (e.name !== 'debounce.canceled' || !options.onSuccess) {
+        throw e;
+      }
+      return null;
+    }
+  };
+
+  wrapper.cancel = () => {
+    canceled = true;
+    clearTimeout(timer);
+    timer = null;
+  };
+
+  wrapper.skipDelay = (...args) => {
+    skipNextDelay = true;
+    return wrapper(...args);
+  };
+
+  return wrapper;
+}
+
+function throttle(fn, delay) {
+  let inThrottle;
+
+  return (...args) => {
+    return new Promise((resolve) => {
+      if (!inThrottle) {
+        inThrottle = true;
+        setTimeout(() => {
+          inThrottle = false;
+          resolve(fn.apply(this, args));
+        }, delay);
+      }
+    });
+  };
+}
diff --git a/package.json b/package.json
index 39908a2106..958e5fd617 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,6 @@
     "cors": "^2.8.5",
     "css-loader": "^5.2.4",
     "dayjs": "^1.9.8",
-    "debounce-async": "0.0.2",
     "dompurify": "^2.3.1",
     "express": "^4.16.4",
     "express-bearer-token": "^2.4.0",
@@ -148,4 +147,4 @@
   "browserslist": [
     "ie >= 10"
   ]
-}
\ No newline at end of file
+}
diff --git a/test/utils.js b/test/utils.js
index a66cafdf84..35dfcaa083 100644
--- a/test/utils.js
+++ b/test/utils.js
@@ -1,7 +1,7 @@
 const t = require('../test-lib/test.js');
 const assert = require('assert');
 const _ = require('lodash');
-const { debounce, throttle } = require('../modules/@apostrophecms/ui/ui/apos/utils/index');
+const { debounceAsync, throttle } = require('../modules/@apostrophecms/ui/ui/apos/utils/index');
 
 describe('Utils', function() {
 
@@ -376,10 +376,10 @@ describe('Utils', function() {
       const calledAsyncSlow = [];
       let asyncErrCatched = false;
 
-      const debouncedNormal = debounce(normalFn, 50);
-      const debouncedAsync = debounce(asyncFn, 50);
-      const debouncedAsyncSlow = debounce(asyncSlowFn, 50);
-      const debouncedAsyncErr = debounce(AsyncErrFn, 50);
+      const debouncedNormal = debounceAsync(normalFn, 50);
+      const debouncedAsync = debounceAsync(asyncFn, 50);
+      const debouncedAsyncSlow = debounceAsync(asyncSlowFn, 50);
+      const debouncedAsyncErr = debounceAsync(AsyncErrFn, 50);
 
       debouncedNormal(1);
       debouncedNormal(2);
@@ -441,6 +441,267 @@ describe('Utils', function() {
 
     });
 
+    it('should cancel debounced calls (sync)', async function () {
+      let calledSync = [];
+
+      function syncFn(num) {
+        calledSync.push(num);
+        return 'test';
+      };
+
+      const debouncedSync = debounceAsync(syncFn, 50);
+
+      debouncedSync(1);
+      await wait(200);
+      debouncedSync(2);
+      debouncedSync(3);
+      debouncedSync.cancel();
+      assert.deepEqual(calledSync, [ 1 ], 'should cancel all calls after the first call');
+      calledSync = [];
+
+      debouncedSync(1);
+      debouncedSync(2);
+      debouncedSync(3);
+      debouncedSync.cancel();
+      await wait(200);
+      assert.deepEqual(calledSync, [], 'should cancel all calls when canceled after the 3rd call');
+      calledSync = [];
+
+      debouncedSync(1);
+      debouncedSync(2);
+      debouncedSync.cancel();
+      debouncedSync(3);
+      await wait(100);
+      assert.deepEqual(calledSync, [], 'should cancel all calls when canceled after the 2nd call');
+      calledSync = [];
+
+      debouncedSync(1);
+      debouncedSync(2);
+      debouncedSync.cancel();
+      await wait(100);
+      debouncedSync(3);
+      await wait(100);
+      assert.deepEqual(
+        calledSync,
+        [],
+        'should cancel all calls when canceled and called again after some time'
+      );
+    });
+
+    it('should cancel debounced calls (async)', async function () {
+      let calledAsync = [];
+
+      async function asyncFn(num) {
+        await wait(50);
+        calledAsync.push(num);
+        // Keep all console.debug around to easy debug - ensure
+        // all promises are awaited before the test ends.
+        console.debug('calledAsync', num);
+        return 'async';
+      }
+
+      const debouncedAsync = debounceAsync(asyncFn, 50);
+
+      debouncedAsync(1);
+      await wait(100);
+      debouncedAsync(2);
+      debouncedAsync(3);
+      debouncedAsync.cancel();
+      await wait(200);
+      assert.deepEqual(calledAsync, [ 1 ], 'should cancel all calls after the first call');
+      calledAsync = [];
+
+      debouncedAsync(1);
+      debouncedAsync(2);
+      debouncedAsync(3);
+      debouncedAsync.cancel();
+      await wait(200);
+      assert.deepEqual(calledAsync, [], 'should cancel all calls when canceled after the 3rd call');
+      calledAsync = [];
+
+      debouncedAsync(1);
+      debouncedAsync(2);
+      debouncedAsync.cancel();
+      debouncedAsync(3);
+      await wait(200);
+      assert.deepEqual(calledAsync, [], 'should cancel all calls when canceled after the 2nd call');
+      calledAsync = [];
+
+      debouncedAsync(1);
+      debouncedAsync(2);
+      debouncedAsync.cancel();
+      await wait(200);
+      debouncedAsync(3);
+      await wait(100);
+      assert.deepEqual(
+        calledAsync,
+        [],
+        'should cancel all calls when canceled and called again after some time'
+      );
+    });
+
+    it('should reject ongoing promises after debounce cancel', async function () {
+      const calledAsync = [];
+      async function asyncFn(num, time = 50) {
+        await wait(time);
+        calledAsync.push(num);
+        console.debug('unstoppable async call', num);
+        return 'async';
+      }
+
+      const debouncedAsync = debounceAsync(asyncFn, 50);
+      const promise = debouncedAsync(1, 300);
+      await wait(100);
+      debouncedAsync.cancel();
+
+      await assert.rejects(promise, {
+        name: 'debounce.canceled',
+        message: 'debounce:canceled'
+      });
+
+      assert.deepEqual(calledAsync, [ 1 ], 'the original promise should always resolve');
+    });
+
+    it('should NOT INVOKE onSuccess callback and not reject when canceled', async function () {
+      const calledAsync = [];
+      async function asyncStatelessFn(num, time = 50) {
+        await wait(time);
+        console.debug('asyncStatelessFn:', num);
+        return `async ${num}`;
+      }
+      async function asyncSideEffectFn(result) {
+        await wait(50);
+        console.debug('asyncSideEffectFn:', result);
+        calledAsync.push(result + ' side effect');
+      }
+
+      const debouncedAsync = debounceAsync(asyncStatelessFn, 50, {
+        onSuccess: asyncSideEffectFn
+      });
+      const promise = debouncedAsync(1, 300);
+      await wait(100);
+      debouncedAsync.cancel();
+
+      const result = await promise;
+
+      assert.strictEqual(result, null);
+      assert.deepEqual(
+        calledAsync,
+        [],
+        'the side effect should not be called'
+      );
+    });
+
+    it('should invoke onSuccess callback when not canceled', async function () {
+      const calledAsync = [];
+      async function asyncStatelessFn(num, time = 50) {
+        await wait(time);
+        console.debug('asyncStatelessFn:', num);
+        return `async ${num}`;
+      }
+      async function asyncSideEffectFn(result) {
+        await wait(50);
+        console.debug('asyncSideEffectFn:', result);
+        calledAsync.push(result + ' side effect');
+      }
+
+      const debouncedAsync = debounceAsync(asyncStatelessFn, 50, {
+        onSuccess: asyncSideEffectFn
+      });
+      const result = await debouncedAsync(1);
+      await wait(300);
+
+      assert.deepEqual(
+        calledAsync,
+        [ 'async 1 side effect' ],
+        'the side effect should be called'
+      );
+      assert.strictEqual(result, null);
+    });
+
+    it('should skip the next delay when invoked via skipDelay', async function () {
+      const invoked = [];
+      const calledAsync = [];
+      async function asyncStatelessFn(num, time = 50) {
+        invoked.push(num);
+        await wait(time);
+        console.debug('asyncStatelessFn:', num);
+        return `async ${num}`;
+      }
+      async function asyncSideEffectFn(result) {
+        await wait(50);
+        console.debug('asyncSideEffectFn:', result);
+        calledAsync.push(result + ' side effect');
+      }
+
+      const debouncedAsync = debounceAsync(asyncStatelessFn, 300, {
+        onSuccess: asyncSideEffectFn
+      });
+      debouncedAsync.skipDelay(1, 20);
+      await wait(100);
+      debouncedAsync(2);
+
+      assert.deepEqual(
+        calledAsync,
+        [ 'async 1 side effect' ],
+        'the side effect should be called'
+      );
+      assert.deepEqual(
+        invoked,
+        [ 1 ],
+        'bad invokation of the original function'
+      );
+
+      // Wait for the entire delay time to pass.
+      await wait(500);
+      assert.deepEqual(
+        calledAsync,
+        [ 'async 1 side effect', 'async 2 side effect' ],
+        'the side effect should be called'
+      );
+      assert.deepEqual(
+        invoked,
+        [ 1, 2 ],
+        'bad invokation of the original function after the end of the delay'
+      );
+    });
+
+    it('should bounce skipDelay as well', async function () {
+      const invoked = [];
+      const calledAsync = [];
+
+      async function asyncStatelessFn(num, time = 50) {
+        invoked.push(num);
+        await wait(time);
+        console.debug('asyncStatelessFn:', num);
+        return `async ${num}`;
+      }
+      async function asyncSideEffectFn(result) {
+        await wait(50);
+        console.debug('asyncSideEffectFn:', result);
+        calledAsync.push(result + ' side effect');
+      }
+
+      const debouncedAsync = debounceAsync(asyncStatelessFn, 100, {
+        onSuccess: asyncSideEffectFn
+      });
+      debouncedAsync(1);
+      debouncedAsync.skipDelay(2);
+      debouncedAsync(3);
+      await wait(500);
+
+      assert.deepEqual(
+        calledAsync,
+        [ 'async 1 side effect', 'async 3 side effect' ],
+        'the side effect should be called'
+      );
+      assert.deepEqual(
+        invoked,
+        [ 1, 3 ],
+        'bad invokation of the original function'
+      );
+    });
+
     it('can throttle functions', async function () {
       const calledNormal = [];
       const calledAsync = [];