Forms: Add notice after optimistic response status update (#46056)

* optimizations from review

* add notice to pending action and update load state logic

* changelog

* fix js tests

* fix issue with wrong page loaded on undo

* fix premature removal of pending actions

* Fix UI flicker when undoing status change actions

Fixes a race condition where clicking undo immediately after marking a
response as spam/trash would cause the UI to flicker. The item would
briefly disappear and reappear, and checkboxes would flash on all entries.

Root cause: When undo was clicked, the original action's API response
would arrive after the undo's optimistic update, overwriting it with
stale data. This created a sequence where the UI would update to the
wrong state (spam) before correcting itself (publish).

Solution: Make undo wait for the original action's refetch to complete
before starting. Implemented by:
- Tracking pending refetch promises in a Map by actionId
- Making undo onClick async and awaiting the original refetch
- Using undoTriggered flag to skip refetch if undo clicked quickly
- Removing original pending action state before starting undo

This ensures only one refetch result is applied, eliminating the flicker
while keeping undo responsive.

---------

Co-authored-by: William Viana <vianasw@gmail.com>

Author: dhasilva

projects/packages/forms/changelog/update-forms-optimistic-load-screen

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Forms: Add notice after optimistic response status update

projects/packages/forms/src/dashboard/hooks/use-inbox-data.ts

@@ -78,17 +78,24 @@ export default function useInboxData(): UseInboxDataReturn {
 	const urlStatus = searchParams.get( 'status' );
 	const statusFilter = getStatusFilter( urlStatus );
 
-	const { selectedResponsesCount, currentStatus, currentQuery, filterOptions, invalidRecords } =
-		useSelect(
-			select => ( {
-				selectedResponsesCount: select( dashboardStore ).getSelectedResponsesCount(),
-				currentStatus: select( dashboardStore ).getCurrentStatus(),
-				currentQuery: select( dashboardStore ).getCurrentQuery(),
-				filterOptions: select( dashboardStore ).getFilters(),
-				invalidRecords: select( dashboardStore ).getInvalidRecords(),
-			} ),
-			[]
-		);
+	const {
+		selectedResponsesCount,
+		currentStatus,
+		currentQuery,
+		filterOptions,
+		invalidRecords,
+		hasPendingActions,
+	} = useSelect(
+		select => ( {
+			selectedResponsesCount: select( dashboardStore ).getSelectedResponsesCount(),
+			currentStatus: select( dashboardStore ).getCurrentStatus(),
+			currentQuery: select( dashboardStore ).getCurrentQuery(),
+			filterOptions: select( dashboardStore ).getFilters(),
+			invalidRecords: select( dashboardStore ).getInvalidRecords(),
+			hasPendingActions: select( dashboardStore ).hasPendingActions(),
+		} ),
+		[]
+	);
 
 	// Track the frozen invalid_ids for the current page
 	// This prevents re-fetching when new items are marked as invalid
@@ -146,19 +153,6 @@ export default function useInboxData(): UseInboxDataReturn {
 		[ rawRecords ]
 	);
 
-	/**
-	 * Helper function to determine the effective status of a record,
-	 * considering optimistic edits (status field in edits).
-	 *
-	 * @param {FormResponse} record - The record to check.
-	 * @return {string} The effective status of the record.
-	 */
-	const getEffectiveStatus = ( record: FormResponse ): string => {
-		// getEditedEntityRecord merges edits with the original record,
-		// so if status was edited, it will be in the edited record
-		return record.status || 'publish';
-	};
-
 	/**
 	 * Helper function to check if a status matches the current status filter.
 	 *
@@ -178,9 +172,7 @@ export default function useInboxData(): UseInboxDataReturn {
 	const records = useMemo( () => {
 		// Filter records based on their effective status (considering optimistic edits)
 		const filteredRecords = ( editedRecords || [] ).filter( ( record: FormResponse ) => {
-			const effectiveStatus = getEffectiveStatus( record );
-
-			return statusMatchesFilter( effectiveStatus, statusFilter );
+			return statusMatchesFilter( record.status, statusFilter );
 		} );
 
 		return filteredRecords.map( record => {
@@ -243,7 +235,13 @@ export default function useInboxData(): UseInboxDataReturn {
 		[ countsQueryParams ]
 	);
 
-	const isLoadingData = ! rawRecords?.length && ! hasResolved;
+	// Show loading if:
+	// 1. No records and query hasn't resolved yet (initial load)
+	// 2. No filtered records but there are pending actions (optimistic update removed all items from current view)
+	// Note: We check records.length (filtered) not rawRecords.length because optimistic updates
+	// change status, so items are filtered out of records but still exist in rawRecords
+	const isLoadingData =
+		( ! rawRecords?.length && ! hasResolved ) || ( ! records?.length && hasPendingActions );
 
 	return {
 		totalItemsInbox,