feat(ui): form state queues (#11579)

Implements a form state task queue. This will prevent onChange handlers
within the form component from processing unnecessarily often, sometimes
long after the user has stopped making changes. This leads to a
potentially huge number of network requests if those changes were made
slower than the debounce rate. This is especially noticeable on slow
networks.

Does so through a new `useQueue` hook. This hook maintains a stack of
events that need processing but only processes the final event to
arrive. Every time a new event is pushed to the stack, the currently
running process is aborted (if any), and that event becomes the next in
the queue. This results in a shocking reduction in the time it takes
between final change to form state and the final network response, from
~1.5 minutes to ~3 seconds (depending on the scenario, see below).

This likely fixes a number of existing open issues. I will link those
issues here once they are identified and verifiably fixed.

Before:

I'm typing slowly here to ensure my changes aren't debounce by the form.
There are a total of 60 characters typed, triggering 58 network requests
and taking around 1.5 minutes to complete after the final change was
made.


https://github.com/user-attachments/assets/49ba0790-a8f8-4390-8421-87453ff8b650

After:

Here there are a total of 69 characters typed, triggering 11 network
requests and taking only about 3 seconds to complete after the final
change was made.


https://github.com/user-attachments/assets/447f8303-0957-41bd-bb2d-9e1151ed9ec3

test/helpers/e2e/assertNetworkRequests.ts

@@ -2,23 +2,37 @@ import type { Page, Request } from '@playwright/test'
 
 import { expect } from '@playwright/test'
 
-// Allows you to test the number of network requests triggered by an action
-// This can be used to ensure various actions do not trigger unnecessary requests
-// For example, an effect within a component might fetch data multiple times unnecessarily
-export const trackNetworkRequests = async (
+/**
+ * Counts the number of network requests every `interval` milliseconds until `timeout` is reached.
+ * Useful to ensure unexpected network requests are not triggered by an action.
+ * For example, an effect within a component might fetch data multiple times unnecessarily.
+ * @param page The Playwright page
+ * @param url The URL to match in the network requests
+ * @param action The action to perform
+ * @param options Options
+ * @param options.allowedNumberOfRequests The number of requests that are allowed to be made, defaults to 1
+ * @param options.beforePoll A function to run before polling the network requests
+ * @param options.interval The interval in milliseconds to poll the network requests, defaults to 1000
+ * @param options.timeout The timeout in milliseconds to poll the network requests, defaults to 5000
+ * @returns The matched network requests
+ */
+export const assertNetworkRequests = async (
   page: Page,
   url: string,
   action: () => Promise<any>,
-  options?: {
+  {
+    beforePoll,
+    allowedNumberOfRequests = 1,
+    timeout = 5000,
+    interval = 1000,
+  }: {
     allowedNumberOfRequests?: number
     beforePoll?: () => Promise<any> | void
     interval?: number
     timeout?: number
-  },
+  } = {},
 ): Promise<Array<Request>> => {
-  const { beforePoll, allowedNumberOfRequests = 1, timeout = 5000, interval = 1000 } = options || {}
-
-  const matchedRequests = []
+  const matchedRequests: Request[] = []
 
   // begin tracking network requests
   page.on('request', (request) => {