When you render a Form with the Pages.Form.withConcurrent Option, the state of in-flight and completed submissions will be available from your Route module through app.concurrentSubmissions as a Dict String (ConcurrentSubmission (Maybe Action)).

You can use this state to declaratively derive Pending UI or Optimistic UI from your pending submissions (without managing the state in your Model, since elm-pages manages form submission state for you).

You can see the full-stack TodoMVC example for a complete example of deriving Pending UI state from app.concurrentSubmissions.

For example, this how the TodoMVC example derives the list of new items that are being created (but are still pending).

view :
    App Data ActionData RouteParams
    -> Shared.Model
    -> Model
    -> View (PagesMsg Msg)
view app shared model =
    let
        pendingActions : List Action
        pendingActions =
            app.concurrentSubmissions
                |> Dict.values
                |> List.filterMap
                    (\{ status, payload } ->
                        case status of
                            Pages.ConcurrentSubmission.Complete _ ->
                                Nothing


                            _ ->
                                allForms
                                    |> Form.Handler.run payload.fields
                                    |> Form.toResult
                                    |> Result.toMaybe
                    )


        newPendingItems : List Entry
        newPendingItems =
            pendingActions
                |> List.filterMap
                    (\submission ->
                        case submission of
                            Add description ->
                                Just
                                    { description = description
                                    , completed = False
                                    , id = ""
                                    , isPending = True
                                    }


                            _ ->
                            -- `newPendingItems` only cares about pending Add actions. Other values will use
                            -- pending submissions for other types of Actions.
                                Nothing
                    )
    in
    itemsView app newPendingItems


    allForms : Form.Handler.Handler String Action
    allForms =
            |> Form.Handler.init Add addItemForm
            -- |> Form.Handler.with ...




    type Action
        = UpdateEntry ( String, String )
        | Add String
        | Delete String
        | DeleteComplete
        | Check ( Bool, String )
        | CheckAll Bool