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/admin/collections/Posts.ts

@@ -263,25 +263,6 @@ export const Posts: CollectionConfig = {
         position: 'sidebar',
       },
     },
-    {
-      name: 'validateUsingEvent',
-      type: 'text',
-      admin: {
-        description:
-          'This field should only validate on submit. Try typing "Not allowed" and submitting the form.',
-      },
-      validate: (value, { event }) => {
-        if (event === 'onChange') {
-          return true
-        }
-
-        if (value === 'Not allowed') {
-          return 'This field has been validated only on submit'
-        }
-
-        return true
-      },
-    },
   ],
   labels: {
     plural: slugPluralLabel,

test/admin/e2e/document-view/e2e.spec.ts

@@ -174,36 +174,12 @@ describe('Document View', () => {
     })
   })
 
-  describe('form state', () => {
-    test('collection — should re-enable fields after save', async () => {
-      await page.goto(postsUrl.create)
-      await page.locator('#field-title').fill(title)
-      await saveDocAndAssert(page)
-      await expect(page.locator('#field-title')).toBeEnabled()
-    })
-
-    test('global — should re-enable fields after save', async () => {
-      await page.goto(globalURL.global(globalSlug))
-      await page.locator('#field-title').fill(title)
-      await saveDocAndAssert(page)
-      await expect(page.locator('#field-title')).toBeEnabled()
-    })
-
-    test('should thread proper event argument to validation functions', async () => {
-      await page.goto(postsUrl.create)
-      await page.locator('#field-title').fill(title)
-      await page.locator('#field-validateUsingEvent').fill('Not allowed')
-      await saveDocAndAssert(page, '#action-save', 'error')
-    })
-  })
-
   describe('document titles', () => {
     test('collection — should render fallback titles when creating new', async () => {
       await page.goto(postsUrl.create)
       await checkPageTitle(page, '[Untitled]')
       await checkBreadcrumb(page, 'Create New')
       await saveDocAndAssert(page)
-      expect(true).toBe(true)
     })
 
     test('collection — should render `useAsTitle` field', async () => {
@@ -213,7 +189,6 @@ describe('Document View', () => {
       await wait(500)
       await checkPageTitle(page, title)
       await checkBreadcrumb(page, title)
-      expect(true).toBe(true)
     })
 
     test('collection — should render `id` as `useAsTitle` fallback', async () => {