Fix the APM RUM page-load transaction

[lizozom]

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:

[elasticmachine]

Pinging @elastic/kibana-core (Team:Core)

[lizozom]

First load (no cash) - page load time is 49 seconds

Untitled_.Oct.18.2021.7_17.PM.mp4

Secondary refresh - page load is 13 seconds

Untitled_.Oct.18.2021.7_22.PM.mp4

[lizozom]

The impact of this fix can be seen here -

The average latency has increased by ~25% since code was merged to main.

However, the absolute numbers we are seeing on CI runs is still significantly better than the actual results we see on local dev \ QA \ prod environments.