Fixes for the ResizeObserver and actions editor

Author: abbradar

src/components/panels/HeaderPanel.vue

@@ -107,6 +107,7 @@
 import { Component, Vue, Prop } from 'vue-property-decorator'
 import Popper from 'vue-popperjs'
 
+import { debounceTillAnimationFrame } from '@/utils'
 import type { IUserViewType } from '@/components/FormControl.vue'
 import ButtonItem from '@/components/buttons/ButtonItem.vue'
 import type { Button } from '@/components/buttons/buttons'
@@ -181,7 +182,9 @@ export default class HeaderPanel extends Vue {
   private mounted() {
     if (this.$refs['headerPanel']) {
       /* eslint-disable-next-line @typescript-eslint/unbound-method */
-      this.panelResizeObserver = new ResizeObserver(this.onPanelResize)
+      this.panelResizeObserver = new ResizeObserver(
+        debounceTillAnimationFrame(() => this.onPanelResize()),
+      )
       this.panelResizeObserver.observe(this.$refs['headerPanel'] as HTMLElement)
     }
   }

src/components/views/Table.vue

@@ -471,6 +471,7 @@ import {
   parseFromClipboard,
   waitTimeout,
   ClipboardParseValue,
+  debounceTillAnimationFrame,
 } from '@/utils'
 import { valueIsNull } from '@/values'
 import { UserView } from '@/components'
@@ -2658,7 +2659,9 @@ export default class UserViewTable extends mixins<
       },
     )
     if (this.$refs['tableWrapper']) {
-      this.tableResizeObserver = new ResizeObserver(this.onTableResize)
+      this.tableResizeObserver = new ResizeObserver(
+        debounceTillAnimationFrame(this.onTableResize),
+      )
       this.tableResizeObserver.observe(
         this.$refs['tableWrapper'] as HTMLElement,
       )

src/utils.ts

@@ -47,6 +47,19 @@ export const nextRender = (): Promise<void> =>
     )
   })
 
+export const debounceTillAnimationFrame = (f: () => void): (() => void) => {
+  let scheduled = false
+  return () => {
+    if (!scheduled) {
+      scheduled = true
+      requestAnimationFrame(() => {
+        scheduled = false
+        f()
+      })
+    }
+  }
+}
+
 /* eslint-disable import/no-mutable-exports */
 export declare let process: {
   env: Record<string, string>

vue.config.js

@@ -45,7 +45,9 @@ export default {
   configureWebpack: {
     plugins: [
       new MonacoWebpackPlugin({
-        languages: ['sql', 'javascript', 'json', 'html'],
+        // `typescript` is needed when `javascript` is enabled.
+        // Otherwise we get runtime errors when trying to edit actions.
+        languages: ['sql', 'javascript', 'typescript', 'json', 'html'],
       }),
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/locale$/,