Our code currently loads APM RUM to create app based transactions.

When the apm-rum init function is called, it internally creates a page-load transaction. However, due to the way our code is structured, the duration of this transaction is just an arbitrary number (time of loading bootstrap + some extra processing) and it does not accurately reflect our real load time.

This is a rough diagram of the current page-load event:

After chatting with @vigneshshanmugam, we have come up with a way to patch this behavior.
If it is found useful, @elastic/apm-agent-rum might improve their API at some point.

The steps for the patch are:

1. Immediately after initializing apm by calling init (in apm_system.ts), get the current transaction and prevent it from closing by calling pageLoadTransaction.block(true) (docs). This shouldn't normally happen, but if the transaction is undefined or it's type is not page-load we should report an error (where to?).
2. Right after, add a marker (transaction.mark) called apm-setup to the page-load transaction.
3. Inside the start function, add another marker called apm-start.
4. When about to start a new route-change transaction for the first time, close the page-load transaction explicitly by calling pageLoadTransaction.block(false).

The result would be a more accurate page load event that can be used to measure our actual load time: