Skip to content

fix(ui): always render tabs in insights/frontend to avoid flash during first navigation #100915

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 6, 2025
+26 −15
Merged

fix(ui): always render tabs in insights/frontend to avoid flash during first navigation #100915

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions static/app/components/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ interface BaseRouteObject {
* Including an `Outlet` component as a child element.
*/
deprecatedRouteProps?: never;
handle?: Record<string, unknown>;
/**
* Is a index route
*/
Expand Down
6 changes: 6 additions & 0 deletions static/app/routes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1870,6 +1870,7 @@ function buildRoutes(): RouteObject[] {
children: [
{
index: true,
handle: {module: ModuleName.HTTP},
component: make(
() => import('sentry/views/insights/http/views/httpLandingPage')
),
Expand All @@ -1887,6 +1888,7 @@ function buildRoutes(): RouteObject[] {
children: [
{
index: true,
handle: {module: ModuleName.VITAL},
component: make(
() =>
import('sentry/views/insights/browser/webVitals/views/webVitalsLandingPage')
Expand All @@ -1905,6 +1907,7 @@ function buildRoutes(): RouteObject[] {
children: [
{
index: true,
handle: {module: ModuleName.RESOURCE},
component: make(
() =>
import('sentry/views/insights/browser/resources/views/resourcesLandingPage')
Expand Down Expand Up @@ -1985,6 +1988,7 @@ function buildRoutes(): RouteObject[] {
path: `${MODULE_BASE_URLS[ModuleName.SESSIONS]}/`,
children: [
{
handle: {module: ModuleName.SESSIONS},
index: true,
component: make(() => import('sentry/views/insights/sessions/views/overview')),
},
Expand Down Expand Up @@ -2021,9 +2025,11 @@ function buildRoutes(): RouteObject[] {
},
{
path: `${FRONTEND_LANDING_SUB_PATH}/`,
component: make(() => import('sentry/views/insights/pages/frontend/layout')),
children: [
{
index: true,
handle: {module: undefined},
component: make(
() => import('sentry/views/insights/pages/frontend/frontendOverviewPage')
),
Expand Down
2 changes: 1 addition & 1 deletion static/app/utils/reactRouter6Compat/router.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ export function translateSentryRoute(tree: SentryRouteObject): RouteObject {
// to shim the `useRoutes` hook to act like it did n react-router 3,
// where the path was not resolved (looks like /issues/:issueId). Once we
// remove usages of useRoutes we can remove this value from the handle.
const handle = {name, path};
const handle = {...tree.handle, name, path};

if (tree.index) {
return {index: true, element: getElement(component, deprecatedRouteProps), handle};
Expand Down
2 changes: 0 additions & 2 deletions static/app/views/insights/browser/resources/views/resourcesLandingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import {ModulesOnboarding} from 'sentry/views/insights/common/components/modules
import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
import {DomainSelector} from 'sentry/views/insights/common/views/spans/selectors/domainSelector';
import SubregionSelector from 'sentry/views/insights/common/views/spans/selectors/subregionSelector';
import {FrontendHeader} from 'sentry/views/insights/pages/frontend/frontendPageHeader';
import {ModuleName} from 'sentry/views/insights/types';

const {SPAN_OP, SPAN_DOMAIN} = BrowserStarfishFields;
Expand All @@ -31,7 +30,6 @@ function ResourcesLandingPage() {
return (
<React.Fragment>
<PageAlertProvider>
<FrontendHeader module={ModuleName.RESOURCE} />
<ModuleFeature moduleName={ModuleName.RESOURCE}>
<Layout.Body>
<Layout.Main fullWidth>
Expand Down
3 changes: 0 additions & 3 deletions static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import {ModulePageFilterBar} from 'sentry/views/insights/common/components/modul
import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
import {ModulesOnboarding} from 'sentry/views/insights/common/components/modulesOnboarding';
import {useWebVitalsDrawer} from 'sentry/views/insights/common/utils/useWebVitalsDrawer';
import {FrontendHeader} from 'sentry/views/insights/pages/frontend/frontendPageHeader';
import {ModuleName, SpanFields, type SubregionCode} from 'sentry/views/insights/types';

const WEB_VITALS_COUNT = 5;
Expand Down Expand Up @@ -68,8 +67,6 @@ function WebVitalsLandingPage() {

return (
<React.Fragment>
<FrontendHeader module={ModuleName.VITAL} />

<ModuleFeature moduleName={ModuleName.VITAL}>
<Layout.Body>
<Layout.Main fullWidth>
Expand Down
3 changes: 0 additions & 3 deletions static/app/views/insights/http/views/httpLandingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,6 @@ import {
import {Referrer} from 'sentry/views/insights/http/referrers';
import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader';
import {BACKEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/backend/settings';
import {FrontendHeader} from 'sentry/views/insights/pages/frontend/frontendPageHeader';
import {FRONTEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/frontend/settings';
import {MobileHeader} from 'sentry/views/insights/pages/mobile/mobilePageHeader';
import {MOBILE_LANDING_SUB_PATH} from 'sentry/views/insights/pages/mobile/settings';
import {useDomainViewFilters} from 'sentry/views/insights/pages/useFilters';
Expand Down Expand Up @@ -105,7 +103,6 @@ export function HTTPLandingPage() {

return (
<React.Fragment>
{view === FRONTEND_LANDING_SUB_PATH && <FrontendHeader {...headerProps} />}
{view === BACKEND_LANDING_SUB_PATH && <BackendHeader {...headerProps} />}
{view === MOBILE_LANDING_SUB_PATH && <MobileHeader {...headerProps} />}

Expand Down
3 changes: 0 additions & 3 deletions static/app/views/insights/pages/frontend/frontendOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,11 @@ import {
isAValidSort,
type ValidSort,
} from 'sentry/views/insights/pages/frontend/frontendOverviewTable';
import {FrontendHeader} from 'sentry/views/insights/pages/frontend/frontendPageHeader';
import {useFrontendTableData} from 'sentry/views/insights/pages/frontend/queries/useFrontendTableData';
import type {PageSpanOps} from 'sentry/views/insights/pages/frontend/settings';
import {
DEFAULT_SORT,
DEFAULT_SPAN_OP_SELECTION,
FRONTEND_LANDING_TITLE,
PAGE_SPAN_OPS,
SPAN_OP_QUERY_PARAM,
} from 'sentry/views/insights/pages/frontend/settings';
Expand Down Expand Up @@ -143,7 +141,6 @@ function FrontendOverviewPage() {
organization={organization}
renderDisabled={NoAccess}
>
<FrontendHeader headerTitle={FRONTEND_LANDING_TITLE} />
<Layout.Body>
<Layout.Main fullWidth>
<ModuleLayout.Layout>
Expand Down
18 changes: 18 additions & 0 deletions static/app/views/insights/pages/frontend/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import {Fragment} from 'react';
import {Outlet, useMatches} from 'react-router-dom';

import {FrontendHeader} from 'sentry/views/insights/pages/frontend/frontendPageHeader';
import {ModuleName} from 'sentry/views/insights/types';

function FrontendLayout() {
const handle = useMatches().at(-1)?.handle as {module?: ModuleName} | undefined;

return (
<Fragment>
{handle && 'module' in handle ? <FrontendHeader module={handle.module} /> : null}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note: there are sub-routes that do not get the module passed, and in those cases, we don’t want to render the tabs at all. This basically applies to all detail pages you can get to from the top landing pages.

The check is done with ’module’ in handle because for the Overview page, we need to explicitly pass handle: undefined because there is no explicit ModuleName for the Overview page.

<Outlet />
</Fragment>
);
}

export default FrontendLayout;
3 changes: 0 additions & 3 deletions static/app/views/insights/sessions/views/overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLay
import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
import {ModulesOnboardingPanel} from 'sentry/views/insights/common/components/modulesOnboarding';
import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
import {FrontendHeader} from 'sentry/views/insights/pages/frontend/frontendPageHeader';
import {FRONTEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/frontend/settings';
import {MobileHeader} from 'sentry/views/insights/pages/mobile/mobilePageHeader';
import {MOBILE_LANDING_SUB_PATH} from 'sentry/views/insights/pages/mobile/settings';
Expand Down Expand Up @@ -65,8 +64,6 @@ function SessionsOverview() {

function ViewSpecificHeader({view}: {view: DomainView | ''}) {
switch (view) {
case FRONTEND_LANDING_SUB_PATH:
return <FrontendHeader module={ModuleName.SESSIONS} />;
case MOBILE_LANDING_SUB_PATH:
return <MobileHeader module={ModuleName.SESSIONS} />;
default:
Expand Down
Loading