fix(structure): close conditional toast when component unmounts

packages/sanity/src/structure/panes/document/documentPanel/documentViews/FormView.tsx

@@ -67,14 +67,19 @@ export const FormView = forwardRef<HTMLDivElement, FormViewProps>(function FormV
   const isLocked = editState?.transactionSyncLock?.enabled
   const {t} = useTranslation(structureLocaleNamespace)
 
-  useConditionalToast({
-    id: `sync-lock-${documentId}`,
-    status: 'warning',
-    enabled: isLocked,
-    title: t('document-view.form-view.sync-lock-toast.title'),
-    description: t('document-view.form-view.sync-lock-toast.description'),
-    closable: true,
-  })
+  const conditionalToastParams = useMemo(
+    () => ({
+      id: `sync-lock-${documentId}`,
+      status: 'warning' as const,
+      enabled: isLocked,
+      title: t('document-view.form-view.sync-lock-toast.title'),
+      description: t('document-view.form-view.sync-lock-toast.description'),
+      closable: true,
+    }),
+    [documentId, isLocked, t],
+  )
+
+  useConditionalToast(conditionalToastParams)
 
   useEffect(() => {
     const sub = documentStore.pair

packages/sanity/src/structure/panes/document/documentPanel/documentViews/useConditionalToast.ts

@@ -32,5 +32,15 @@ export function useConditionalToast(params: ToastParams & {id: string; enabled?:
         duration: 0.01,
       })
     }
+    return () => {
+      // Close the toast when the component unmounts
+      if (params.enabled) {
+        toast.push({
+          ...params,
+          // Note: @sanity/ui fallbacks to the default duration of 4s in case of falsey values
+          duration: 0.01,
+        })
+      }
+    }
   }, [params, toast, wasEnabled])
 }