I would like to be able to measure the time it takes for a content element being displayed in the user's browser in a Single Page App (SPA) in Angular. For example, I've created a loading spinner that is displayed while the app parses the HTML and before the SPA code is rendered. I'd like to know when the spinner began to display, when it ended, and the total duration of the event. Or I'd like to know when a content element ATF became visible. I have read that one way to measure this is the use of W3C user timing, which is supported by APPMon.
While Speed Index and Visually Complete are very useful, it would also be helpful to know when certain events occurred in the render process.
For Non-SPA sites the effort is minimal to insert the tags.
<script>window.performance && performance.mark && performance.mark("ATFAreaBegin")</script>
<!--The content I want to measure -->
<script>window.performance && performance.mark && performance.mark("ATFAreaEnd")</script>
<script>window.performance && performance.measure && performance.measure("ATFDuration", "ATFAreaBegin", "ATFAreaEnd");</script>
However, in SPA's such as Angular, simply inserting the marks into the code such as app.component.html doesn't work to display the marks since its outside of the index.html file.
Perhaps there are other ways to do this. Ideally, it would be great to know the time for a given page and display this in a dashboard along with other metrics such as Speed Index.