docs(screens): Add docs for the screens module (#8498)

This PR adds docs for the new Screens feature that allows users to debug slow screen loads on their mobile app.

Co-authored-by: Liza Mock <[email protected]>

---------

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>
Co-authored-by: Liza Mock <[email protected]>

Author: 3 people

src/docs/product/performance/mobile-vitals.mdx

@@ -67,3 +67,71 @@ You can track time to full display for:
 
 - [Android](/platforms/android/performance/instrumentation/automatic-instrumentation/#time-to-full-display)
 - [Apple](/platforms/apple/performance/instrumentation/automatic-instrumentation/#time-to-full-display)
+
+## Screens
+
+The **Screens** page shows an overview of how long it takes for your application to load its screens. Here you can identify slow or regressed screens and get additional information to understand the factors contributing to the slowness of both time to initial display (TTID) and time to full display (TTFD).
+
+While Sentry automatically tracks TTID, [TTFD](#time-to-initial-display-and-time-to-full-display) requires that the `reportFullyDisplayed()` API be called manually to report that the screen has loaded all of its content and is fully displayed.
+
+### Minimum SDK Requirements:
+
+**For Android:**
+
+- `>=5.0` for automatic activity transactions
+- `>=6.10.0` for TTID
+- `>=6.17.0` for TTFD, (released March, 2023)
+
+**For iOS:**
+
+- `>=3.13` for UIViewController transactions
+- `>=8.4.0` for TTID+TTFD, (released April, 2023)
+
+By default, the **Screens** page displays metrics for the two releases with the highest screen counts for the time range you’ve selected. To choose a different set of releases to compare, use the “release selector” at the top of the page.
+
+The charts section shows a comparison of TTID and TTFD for your top five screens across your two selected releases.
+
+The sortable table below shows a list of your application's screens with the average TTID and TTFD for each release.
+
+**Reasons Why You Might Not Be Seeing Any Data:**
+
+- You don’t have any transactions with op `ui.load`
+- Your SDKs don’t meet the minimum SDK requirements
+
+## Screen Details Page
+
+To get additional information about any of your application's screens, click on them to get to the **Screen Details** page. Here, you’ll see a breakdown of TTID and TTFD values broken out by [device class](/product/reference/search/searchable-properties/#device-classification) (high, medium, low, or unknown), across your selected releases. This will help you understand how users with different device performance levels are being affected.
+
+The Screen Details page also shows the average TTID, average TTFD, and Count (the number of times a screen has been called) - broken out by release.
+
+To see slow TTID and TTFD events and profiles for each release broken out by specific device class, use the “Device Class” filter at the top of the table.
+
+At the bottom of the page, you’ll see a table of spans that occurred during screen load, sorted by the most time your screen spent in that span. Here, you’ll be able to:
+
+- Spot span regressions by comparing the average duration of each span across your two releases of choice.
+
+- Find the slowest spans in the release you’re interested in by looking at average span duration.
+
+- See which spans occur most frequently by looking at “Count”. (This might help you identify excessive io calls or repeated work that might be occurring during screen load.)
+
+**Eligible span operations:**
+
+- file.read
+- file.write
+- ui.load
+- http.client
+- db
+- db.sql.query
+- db.sql.transaction
+
+## Span Detail View
+
+If you click on a span description, it’ll open a side panel view where you can see span details including the average duration and count for that span in each of the releases you’re looking at.
+
+In the table below, you’ll see a list of sampled events and profiles (if they exist). By comparing the two, you’ll be able to see how much the duration of the span you’re looking at deviates from average spans in each of the two releases you’ve selected.
+
+Sentry automatically identifies sample events to help you investigate performance problems. (They’re shown as triangles in the “Average Duration” graph.) To give you an accurate picture, a range of faster than average, slower than average, and average span durations are sampled across the whole time period you’ve selected.
+
+You can use the sample list to drill down to and compare fast, average, and slow events of interest within a given screen.
+
+Clicking on a sample event will take you into either the query's span details within the span waterfall of the **Event Details** page or the profile icon to see the [flamegraph](/product/profiling/flame-charts-graphs/) for the event. To get different event samples, click the "Try Different Samples" button.