fix: ensures autosave only runs sequentially (#9892)

Previously, Autosave could trigger 2 parallel fetches where the second
could outpace the first, leading to inconsistent results.

Now, we use a simple queue-based system where we can push multiple
autosave events into a queue, and only the latest autosave will be
performed.

This also prevents multiple autosaves from ever running in parallel.

Author: jmikrut

packages/ui/src/elements/Autosave/index.tsx

@@ -3,7 +3,7 @@
 import type { ClientCollectionConfig, ClientGlobalConfig } from 'payload'
 
 import { versionDefaults } from 'payload/shared'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useRef, useState } from 'react'
 import { toast } from 'sonner'
 
 import {
@@ -49,6 +49,9 @@ export const Autosave: React.FC<Props> = ({ id, collection, global: globalDoc })
     setLastUpdateTime,
     setMostRecentVersionIsAutosaved,
   } = useDocumentInfo()
+  const queueRef = useRef([])
+  const isProcessingRef = useRef(false)
+
   const { reportUpdate } = useDocumentEvents()
   const { dispatchFields, setSubmitted } = useForm()
   const submitted = useFormSubmitted()
@@ -88,6 +91,25 @@ export const Autosave: React.FC<Props> = ({ id, collection, global: globalDoc })
   // can always retrieve the most to date locale
   localeRef.current = locale
 
+  const processQueue = React.useCallback(async () => {
+    if (isProcessingRef.current || queueRef.current.length === 0) {
+      return
+    }
+
+    isProcessingRef.current = true
+    const latestAction = queueRef.current[queueRef.current.length - 1]
+    queueRef.current = []
+
+    try {
+      await latestAction()
+    } finally {
+      isProcessingRef.current = false
+      if (queueRef.current.length > 0) {
+        await processQueue()
+      }
+    }
+  }, [])
+
   // When debounced fields change, autosave
   useIgnoredEffect(
     () => {
@@ -97,7 +119,7 @@ export const Autosave: React.FC<Props> = ({ id, collection, global: globalDoc })
       let startTimestamp = undefined
       let endTimestamp = undefined
 
-      const autosave = () => {
+      const autosave = async () => {
         if (modified) {
           startTimestamp = new Date().getTime()
 
@@ -129,7 +151,7 @@ export const Autosave: React.FC<Props> = ({ id, collection, global: globalDoc })
                 submitted && !valid && versionsConfig?.drafts && versionsConfig?.drafts?.validate
 
               if (!skipSubmission) {
-                void fetch(url, {
+                await fetch(url, {
                   body: JSON.stringify(data),
                   credentials: 'include',
                   headers: {
@@ -229,7 +251,8 @@ export const Autosave: React.FC<Props> = ({ id, collection, global: globalDoc })
         }
       }
 
-      void autosave()
+      queueRef.current.push(autosave)
+      void processQueue()
 
       return () => {
         if (autosaveTimeout) {