Use our own debounce function

This function is so small that using lodash is not worth it.

app/javascript/alchemy_admin/picture_editors.js

@@ -1,4 +1,4 @@
-import debounce from "lodash-es/debounce"
+import debounce from "alchemy_admin/utils/debounce"
 import max from "lodash-es/max"
 import { get } from "alchemy_admin/utils/ajax"
 import ImageLoader from "alchemy_admin/image_loader"
@@ -27,6 +27,8 @@ class PictureEditor {
       this.imageLoader = new ImageLoader(this.image)
     }
 
+    // The mutation observer is observing multiple fields that all get updated
+    // simultaneously. We only want to update the image once, so we debounce.
     this.update = debounce(() => {
       this.updateImage()
       this.updateCropLink()

app/javascript/alchemy_admin/utils/debounce.js

@@ -0,0 +1,10 @@
+export default function (func, delay) {
+  let timeout
+
+  return function (...args) {
+    const that = this
+
+    clearTimeout(timeout)
+    timeout = setTimeout(() => func.apply(that, args), delay)
+  }
+}

config/importmap.rb

@@ -1,6 +1,5 @@
 pin "@ungap/custom-elements", to: "https://ga.jspm.io/npm:@ungap/custom-elements@1.3.0/index.js", preload: true
 pin "flatpickr", to: "https://ga.jspm.io/npm:flatpickr@4.6.13/dist/esm/index.js", preload: true
-pin "lodash-es/debounce", to: "https://ga.jspm.io/npm:lodash-es@4.17.21/debounce.js", preload: true
 pin "lodash-es/max", to: "https://ga.jspm.io/npm:lodash-es@4.17.21/max.js", preload: true
 pin "sortablejs", to: "https://ga.jspm.io/npm:sortablejs@1.15.1/modular/sortable.esm.js", preload: true
 pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true

spec/javascript/alchemy_admin/utils/debounce.spec.js

@@ -0,0 +1,44 @@
+import debounce from "alchemy_admin/utils/debounce.js"
+
+describe("debounce", () => {
+  let mockFunc
+  let debouncedFunc
+
+  beforeEach(() => {
+    jest.useFakeTimers()
+    mockFunc = jest.fn()
+    debouncedFunc = debounce(mockFunc, 1000)
+  })
+
+  afterEach(() => {
+    jest.clearAllTimers()
+  })
+
+  it("should debounce the function", () => {
+    debouncedFunc()
+    debouncedFunc()
+    debouncedFunc()
+
+    expect(mockFunc).not.toBeCalled()
+
+    jest.runAllTimers()
+
+    expect(mockFunc).toBeCalled()
+    expect(mockFunc).toHaveBeenCalledTimes(1)
+  })
+
+  it("should debounce the function with the specified delay", () => {
+    debouncedFunc()
+    jest.advanceTimersByTime(500)
+    debouncedFunc()
+    jest.advanceTimersByTime(500)
+    debouncedFunc()
+
+    expect(mockFunc).not.toBeCalled()
+
+    jest.runAllTimers()
+
+    expect(mockFunc).toBeCalled()
+    expect(mockFunc).toHaveBeenCalledTimes(1)
+  })
+})