You would first create a boolean page or component state with false as the default. Start the action chain with a delay followed by a conditional action that checks the state. If it is true, terminate the action chain. If false, continue with the delete. I would use an alert dialog instead of a snack bar for the undo delete button. The undo delete button simply sets the page/component state to true which stops the action chain. You can set the alert dialog to disappear after the time expires or if the user closes it.

Unless you need to actually delete the record, you can just create a new boolean field called something like \"active\" and simply add a filter to your queries to only show records where active == true. This would just hide the records instead of deleting them and in order to unhide, just update the active field to true.

I prefer this method unless you have a really large amount of data and need to limit query size for performance issues. In that case, creating a second collection or table and move records from the main collection or table into a second collection or table for storing deleted records. This soft delete process makes restoring deleted records a lot simpler.

If you are using Firebase, there is a really good firebase extension that automates the process of soft deletes. You can simply update a boolean in the second collection to true in order to restore the original. Here is a link to the extension:

https://extensions.dev/extensions/adamnathanlewis/ext-firestore-soft-deletes

Undo Button