Skip to content

Conversation

jasonyuezhang
Copy link
Owner

mobile was bit more work than frontend/backend because Mobile Vitals has a different header (different text + Info Tooltip) and an additional headerAction that depends on a hook, so this logic had to be moved to a conditional MobileVitalsHeader that’s now rendered in mobile/layout.


Copied from getsentry#101060
Original PR: getsentry#101060

Copy link

Eliminate UI Flash by Always Rendering Tabs in Mobile Insights

This PR restructures how headers and tabs are rendered in the insights/mobile area to eliminate a UI flash that occurred during initial navigation. The change introduces a persistent MobileLayout component that renders headers (including the specialized MobileVitalsHeader for the Mobile Vitals module) at a consistent layout level, moving related logic out of individual pages. The routing structure is updated to accommodate this, and redundant header rendering in downstream pages is removed. Affected tests and related modules are likewise updated to reflect the new layout and routing paradigm.

Key Changes

• Introduced new MobileLayout component in static/app/views/insights/pages/mobile/layout.tsx to handle tab and header rendering for mobile insights pages.
• Added specialized MobileVitalsHeader for rendering unique header requirements in the Mobile Vitals module.
• Removed in-page header logic from screensLandingPage.tsx, moving header and action rendering to the layout level.
• Updated routing in static/app/routes.tsx to wrap mobile pages under MobileLayout, supplying handle props to route-level children for module identification.
• Adjusted test setup in screensLandingPage.spec.tsx and updated test render logic to use the new layout and route structures.
• Removed legacy or redundant header code from screensLandingPage.tsx, overview.tsx, httpLandingPage.tsx, am1OverviewPage.tsx, and mobileOverviewPage.tsx to ensure headers and tabs are only rendered at the layout level.
• Added or modified imports and interfaces as needed for new flow.

Affected Areas

static/app/views/insights/pages/mobile/layout.tsx (new persistent layout)
static/app/views/insights/mobile/screens/views/screensLandingPage.tsx (header logic removed)
static/app/views/insights/mobile/screens/views/screensLandingPage.spec.tsx (test updates)
static/app/views/insights/pages/mobile/am1OverviewPage.tsx
static/app/views/insights/pages/mobile/mobileOverviewPage.tsx
static/app/views/insights/sessions/views/overview.tsx
static/app/views/insights/http/views/httpLandingPage.tsx
static/app/routes.tsx (routing structure for mobile/insights)

This summary was automatically generated by @propel-code-bot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants