fix(ui): infinite loading states when adding blocks or array rows (#10175)

Fixes #10070. Adding new blocks or array rows can randomly get stuck
within an infinite loading state. This was because the abort controllers
responsible for disregarding duplicate `onChange` and `onSave` events
was not properly resetting its refs across invocations. This caused
subsequent event handlers to incorrectly abort themselves, leading to
unresolved requests and a `null` form state. Similarly, the cleanup
effects responsible for aborting these requests on component unmount
were also referencing its `current` property directly off the refs,
which can possible be stale if not first set as a variable outside the
return function.

This PR also carries over some missing `onSave` logic from the default
edit view into the live preview view. In the future the logic between
these two views should be standardized, as they're nearly identical but
often become out of sync. This can likely be done through the use of
reusable hooks, such as `useOnSave`, `useOnChange`, etc. Same with the
document locking functionality which is complex and deeply integrated
into each of these views.

Author: jacobsfletch

packages/next/src/views/CreateFirstUser/index.client.tsx

@@ -20,7 +20,7 @@ import {
   useServerFunctions,
   useTranslation,
 } from '@payloadcms/ui'
-import { abortAndIgnore } from '@payloadcms/ui/shared'
+import { abortAndIgnore, handleAbortRef } from '@payloadcms/ui/shared'
 import React, { useEffect } from 'react'
 
 export const CreateFirstUserClient: React.FC<{
@@ -43,16 +43,13 @@ export const CreateFirstUserClient: React.FC<{
   const { t } = useTranslation()
   const { setUser } = useAuth()
 
-  const formStateAbortControllerRef = React.useRef<AbortController>(null)
+  const abortOnChangeRef = React.useRef<AbortController>(null)
 
   const collectionConfig = getEntityConfig({ collectionSlug: userSlug }) as ClientCollectionConfig
 
   const onChange: FormProps['onChange'][0] = React.useCallback(
     async ({ formState: prevFormState }) => {
-      abortAndIgnore(formStateAbortControllerRef.current)
-
-      const controller = new AbortController()
-      formStateAbortControllerRef.current = controller
+      const controller = handleAbortRef(abortOnChangeRef)
 
       const response = await getFormState({
         collectionSlug: userSlug,
@@ -64,6 +61,8 @@ export const CreateFirstUserClient: React.FC<{
         signal: controller.signal,
       })
 
+      abortOnChangeRef.current = null
+
       if (response && response.state) {
         return response.state
       }
@@ -76,8 +75,10 @@ export const CreateFirstUserClient: React.FC<{
   }
 
   useEffect(() => {
+    const abortOnChange = abortOnChangeRef.current
+
     return () => {
-      abortAndIgnore(formStateAbortControllerRef.current)
+      abortAndIgnore(abortOnChange)
     }
   }, [])
 

packages/next/src/views/LivePreview/index.client.tsx

@@ -7,6 +7,7 @@ import type {
   ClientGlobalConfig,
   ClientUser,
   Data,
+  FormState,
   LivePreviewConfig,
 } from 'payload'
 
@@ -25,21 +26,25 @@ import {
   useDocumentDrawerContext,
   useDocumentEvents,
   useDocumentInfo,
+  useEditDepth,
   useServerFunctions,
   useTranslation,
+  useUploadEdits,
 } from '@payloadcms/ui'
 import {
   abortAndIgnore,
+  formatAdminURL,
+  handleAbortRef,
   handleBackToDashboard,
   handleGoBack,
   handleTakeOver,
 } from '@payloadcms/ui/shared'
-import { useRouter } from 'next/navigation.js'
+import { useRouter, useSearchParams } from 'next/navigation.js'
 import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 
 import { useLivePreviewContext } from './Context/context.js'
-import { LivePreviewProvider } from './Context/index.js'
 import './index.scss'
+import { LivePreviewProvider } from './Context/index.js'
 import { LivePreview } from './Preview/index.js'
 import { usePopupWindow } from './usePopupWindow.js'
 
@@ -75,10 +80,12 @@ const PreviewView: React.FC<Props> = ({
     disableLeaveWithoutSaving,
     docPermissions,
     documentIsLocked,
+    getDocPermissions,
     getDocPreferences,
     globalSlug,
     hasPublishPermission,
     hasSavePermission,
+    incrementVersionCount,
     initialData,
     initialState,
     isEditing,
@@ -88,11 +95,10 @@ const PreviewView: React.FC<Props> = ({
     setDocumentIsLocked,
     unlockDocument,
     updateDocumentEditor,
+    updateSavedDocumentData,
   } = useDocumentInfo()
 
-  const { getFormState } = useServerFunctions()
-
-  const { onSave: onSaveFromProps } = useDocumentDrawerContext()
+  const { onSave: onSaveFromContext } = useDocumentDrawerContext()
 
   const operation = id ? 'update' : 'create'
 
@@ -103,13 +109,21 @@ const PreviewView: React.FC<Props> = ({
     },
   } = useConfig()
   const router = useRouter()
+  const params = useSearchParams()
+  const locale = params.get('locale')
   const { t } = useTranslation()
   const { previewWindowType } = useLivePreviewContext()
   const { refreshCookieAsync, user } = useAuth()
   const { reportUpdate } = useDocumentEvents()
+  const { resetUploadEdits } = useUploadEdits()
+  const { getFormState } = useServerFunctions()
 
   const docConfig = collectionConfig || globalConfig
 
+  const entitySlug = collectionConfig?.slug || globalConfig?.slug
+
+  const depth = useEditDepth()
+
   const lockDocumentsProp = docConfig?.lockDocuments !== undefined ? docConfig?.lockDocuments : true
   const isLockingEnabled = lockDocumentsProp !== false
 
@@ -118,10 +132,19 @@ const PreviewView: React.FC<Props> = ({
     typeof lockDocumentsProp === 'object' ? lockDocumentsProp.duration : lockDurationDefault
   const lockDurationInMilliseconds = lockDuration * 1000
 
+  const autosaveEnabled = Boolean(
+    (collectionConfig?.versions?.drafts && collectionConfig?.versions?.drafts?.autosave) ||
+      (globalConfig?.versions?.drafts && globalConfig?.versions?.drafts?.autosave),
+  )
+
+  const preventLeaveWithoutSaving =
+    typeof disableLeaveWithoutSaving !== 'undefined' ? !disableLeaveWithoutSaving : !autosaveEnabled
+
   const [isReadOnlyForIncomingUser, setIsReadOnlyForIncomingUser] = useState(false)
   const [showTakeOverModal, setShowTakeOverModal] = useState(false)
 
-  const formStateAbortControllerRef = useRef(new AbortController())
+  const abortOnChangeRef = useRef<AbortController>(null)
+  const abortOnSaveRef = useRef<AbortController>(null)
 
   const [editSessionStartTime, setEditSessionStartTime] = useState(Date.now())
 
@@ -140,10 +163,12 @@ const PreviewView: React.FC<Props> = ({
   })
 
   const onSave = useCallback(
-    (json) => {
+    async (json): Promise<FormState> => {
+      const controller = handleAbortRef(abortOnSaveRef)
+
       reportUpdate({
         id,
-        entitySlug: collectionSlug,
+        entitySlug,
         updatedAt: json?.result?.updatedAt || new Date().toISOString(),
       })
 
@@ -153,38 +178,91 @@ const PreviewView: React.FC<Props> = ({
         void refreshCookieAsync()
       }
 
-      // Unlock the document after save
-      if ((id || globalSlug) && isLockingEnabled) {
-        setDocumentIsLocked(false)
+      incrementVersionCount()
+
+      if (typeof updateSavedDocumentData === 'function') {
+        void updateSavedDocumentData(json?.doc || {})
       }
 
-      if (typeof onSaveFromProps === 'function') {
-        void onSaveFromProps({
+      if (typeof onSaveFromContext === 'function') {
+        void onSaveFromContext({
           ...json,
           operation: id ? 'update' : 'create',
         })
       }
+
+      if (!isEditing && depth < 2) {
+        // Redirect to the same locale if it's been set
+        const redirectRoute = formatAdminURL({
+          adminRoute,
+          path: `/collections/${collectionSlug}/${json?.doc?.id}${locale ? `?locale=${locale}` : ''}`,
+        })
+        router.push(redirectRoute)
+      } else {
+        resetUploadEdits()
+      }
+
+      await getDocPermissions(json)
+
+      if ((id || globalSlug) && !autosaveEnabled) {
+        const docPreferences = await getDocPreferences()
+
+        const { state } = await getFormState({
+          id,
+          collectionSlug,
+          data: json?.doc || json?.result,
+          docPermissions,
+          docPreferences,
+          globalSlug,
+          operation,
+          renderAllFields: true,
+          returnLockStatus: false,
+          schemaPath: entitySlug,
+          signal: controller.signal,
+        })
+
+        // Unlock the document after save
+        if (isLockingEnabled) {
+          setDocumentIsLocked(false)
+        }
+
+        abortOnSaveRef.current = null
+
+        return state
+      }
     },
     [
+      adminRoute,
       collectionSlug,
+      depth,
+      docPermissions,
+      entitySlug,
+      getDocPermissions,
+      getDocPreferences,
+      getFormState,
       globalSlug,
       id,
+      incrementVersionCount,
+      isEditing,
       isLockingEnabled,
-      onSaveFromProps,
+      locale,
+      onSaveFromContext,
+      operation,
       refreshCookieAsync,
       reportUpdate,
+      resetUploadEdits,
+      router,
       setDocumentIsLocked,
+      updateSavedDocumentData,
       user,
       userSlug,
+      autosaveEnabled,
     ],
   )
 
   const onChange: FormProps['onChange'][0] = useCallback(
     async ({ formState: prevFormState }) => {
-      abortAndIgnore(formStateAbortControllerRef.current)
-
-      const controller = new AbortController()
-      formStateAbortControllerRef.current = controller
+      const controller = handleAbortRef(abortOnChangeRef)
 
       const currentTime = Date.now()
       const timeSinceLastUpdate = currentTime - editSessionStartTime
@@ -242,6 +320,8 @@ const PreviewView: React.FC<Props> = ({
         }
       }
 
+      abortOnChangeRef.current = null
+
       return state
     },
     [
@@ -308,8 +388,12 @@ const PreviewView: React.FC<Props> = ({
   ])
 
   useEffect(() => {
+    const abortOnChange = abortOnChangeRef.current
+    const abortOnSave = abortOnSaveRef.current
+
     return () => {
-      abortAndIgnore(formStateAbortControllerRef.current)
+      abortAndIgnore(abortOnChange)
+      abortAndIgnore(abortOnSave)
     }
   })
 
@@ -372,12 +456,7 @@ const PreviewView: React.FC<Props> = ({
             }}
           />
         )}
-        {((collectionConfig &&
-          !(collectionConfig.versions?.drafts && collectionConfig.versions?.drafts?.autosave)) ||
-          (globalConfig &&
-            !(globalConfig.versions?.drafts && globalConfig.versions?.drafts?.autosave))) &&
-          !disableLeaveWithoutSaving &&
-          !isReadOnlyForIncomingUser && <LeaveWithoutSaving />}
+        {!isReadOnlyForIncomingUser && preventLeaveWithoutSaving && <LeaveWithoutSaving />}
         <SetDocumentStepNav
           collectionSlug={collectionSlug}
           globalLabel={globalConfig?.label}

packages/ui/src/elements/BulkUpload/EditForm/index.tsx

@@ -17,7 +17,7 @@ import { useEditDepth } from '../../../providers/EditDepth/index.js'
 import { OperationProvider } from '../../../providers/Operation/index.js'
 import { useServerFunctions } from '../../../providers/ServerFunctions/index.js'
 import { useUploadEdits } from '../../../providers/UploadEdits/index.js'
-import { abortAndIgnore } from '../../../utilities/abortAndIgnore.js'
+import { abortAndIgnore, handleAbortRef } from '../../../utilities/abortAndIgnore.js'
 import { formatAdminURL } from '../../../utilities/formatAdminURL.js'
 import { useDocumentDrawerContext } from '../../DocumentDrawer/Provider.js'
 import { DocumentFields } from '../../DocumentFields/index.js'
@@ -56,7 +56,7 @@ export function EditForm({ submitted }: EditFormProps) {
     getEntityConfig,
   } = useConfig()
 
-  const formStateAbortControllerRef = React.useRef<AbortController>(null)
+  const abortOnChangeRef = React.useRef<AbortController>(null)
 
   const collectionConfig = getEntityConfig({ collectionSlug: docSlug }) as ClientCollectionConfig
   const router = useRouter()
@@ -111,12 +111,10 @@ export function EditForm({ submitted }: EditFormProps) {
 
   const onChange: NonNullable<FormProps['onChange']>[0] = useCallback(
     async ({ formState: prevFormState }) => {
-      abortAndIgnore(formStateAbortControllerRef.current)
-
-      const controller = new AbortController()
-      formStateAbortControllerRef.current = controller
+      const controller = handleAbortRef(abortOnChangeRef)
 
       const docPreferences = await getDocPreferences()
+
       const { state: newFormState } = await getFormState({
         collectionSlug,
         docPermissions,
@@ -127,14 +125,18 @@ export function EditForm({ submitted }: EditFormProps) {
         signal: controller.signal,
       })
 
+      abortOnChangeRef.current = null
+
       return newFormState
     },
     [collectionSlug, schemaPath, getDocPreferences, getFormState, docPermissions],
   )
 
   useEffect(() => {
+    const abortOnChange = abortOnChangeRef.current
+
     return () => {
-      abortAndIgnore(formStateAbortControllerRef.current)
+      abortAndIgnore(abortOnChange)
     }
   }, [])