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

static/app/routes.tsx

@@ -1927,6 +1927,7 @@ function buildRoutes(): RouteObject[] {
       children: [
         {
           index: true,
+          handle: {module: ModuleName.DB},
           component: make(
             () => import('sentry/views/insights/database/views/databaseLandingPage')
           ),
@@ -1944,6 +1945,7 @@ function buildRoutes(): RouteObject[] {
       children: [
         {
           index: true,
+          handle: {module: ModuleName.CACHE},
           component: make(
             () => import('sentry/views/insights/cache/views/cacheLandingPage')
           ),
@@ -1955,6 +1957,7 @@ function buildRoutes(): RouteObject[] {
       children: [
         {
           index: true,
+          handle: {module: ModuleName.QUEUE},
           component: make(
             () => import('sentry/views/insights/queues/views/queuesLandingPage')
           ),
@@ -2044,9 +2047,11 @@ function buildRoutes(): RouteObject[] {
     },
     {
       path: `${BACKEND_LANDING_SUB_PATH}/`,
+      component: make(() => import('sentry/views/insights/pages/backend/layout')),
       children: [
         {
           index: true,
+          handle: {module: undefined},
           component: make(
             () => import('sentry/views/insights/pages/backend/backendOverviewPage')
           ),

static/app/views/insights/cache/views/cacheLandingPage.tsx

@@ -24,7 +24,6 @@ import {useSpans} from 'sentry/views/insights/common/queries/useDiscover';
 import {combineMeta} from 'sentry/views/insights/common/utils/combineMeta';
 import {useSamplesDrawer} from 'sentry/views/insights/common/utils/useSamplesDrawer';
 import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters';
-import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader';
 import {ModuleName, SpanFields, SpanFunction} from 'sentry/views/insights/types';
 
 const {CACHE_MISS_RATE} = SpanFunction;
@@ -100,8 +99,6 @@ export function CacheLandingPage() {
 
   return (
     <React.Fragment>
-      <BackendHeader module={ModuleName.CACHE} />
-
       <ModuleFeature moduleName={ModuleName.CACHE}>
         <Layout.Body>
           <Layout.Main fullWidth>

static/app/views/insights/database/views/databaseLandingPage.tsx

@@ -32,7 +32,6 @@ import {
 } from 'sentry/views/insights/database/components/tables/queriesTable';
 import {useSystemSelectorOptions} from 'sentry/views/insights/database/components/useSystemSelectorOptions';
 import {BASE_FILTERS} from 'sentry/views/insights/database/settings';
-import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader';
 import {ModuleName, SpanFields} from 'sentry/views/insights/types';
 
 export function DatabaseLandingPage() {
@@ -126,7 +125,6 @@ export function DatabaseLandingPage() {
 
   return (
     <React.Fragment>
-      <BackendHeader module={ModuleName.DB} />
       <ModuleFeature moduleName={ModuleName.DB}>
         <Layout.Body>
           <Layout.Main fullWidth>

static/app/views/insights/http/views/httpLandingPage.spec.tsx

@@ -367,11 +367,6 @@ describe('HTTPLandingPage', () => {
 
     await waitForElementToBeRemoved(() => screen.queryAllByTestId('loading-indicator'));
 
-    expect(screen.getByRole('heading', {level: 1})).toHaveTextContent('Backend');
-    const tab = screen.getByRole('tab', {name: 'Outbound API Requests'});
-    expect(tab).toBeInTheDocument();
-    expect(tab).toHaveAttribute('aria-selected', 'true');
-
     expect(screen.getByRole('table', {name: 'Domains'})).toBeInTheDocument();
 
     expect(screen.getByRole('columnheader', {name: 'Domain'})).toBeInTheDocument();

static/app/views/insights/http/views/httpLandingPage.tsx

@@ -28,8 +28,6 @@ import {
   isAValidSort,
 } from 'sentry/views/insights/http/components/tables/domainsTable';
 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 {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';
@@ -103,7 +101,6 @@ export function HTTPLandingPage() {
 
   return (
     <React.Fragment>
-      {view === BACKEND_LANDING_SUB_PATH && <BackendHeader {...headerProps} />}
       {view === MOBILE_LANDING_SUB_PATH && <MobileHeader {...headerProps} />}
 
       <ModuleFeature moduleName={ModuleName.HTTP}>

static/app/views/insights/pages/backend/am1BackendOverviewPage.tsx

@@ -32,11 +32,7 @@ import {useUserTeams} from 'sentry/utils/useUserTeams';
 import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
 import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
 import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
-import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader';
-import {
-  BACKEND_LANDING_TITLE,
-  OVERVIEW_PAGE_ALLOWED_OPS,
-} from 'sentry/views/insights/pages/backend/settings';
+import {OVERVIEW_PAGE_ALLOWED_OPS} from 'sentry/views/insights/pages/backend/settings';
 import {
   OVERVIEW_PAGE_ALLOWED_OPS as FRONTEND_OVERVIEW_PAGE_OPS,
   FRONTEND_PLATFORMS,
@@ -229,7 +225,6 @@ export function Am1BackendOverviewPage() {
       organization={organization}
       renderDisabled={NoAccess}
     >
-      <BackendHeader headerTitle={BACKEND_LANDING_TITLE} />
       <Layout.Body>
         <Layout.Main fullWidth>
           <ModuleLayout.Layout>

static/app/views/insights/pages/backend/backendOverviewPage.spec.tsx

@@ -2,7 +2,7 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 import {PageFiltersFixture, PageFilterStateFixture} from 'sentry-fixture/pageFilters';
 import {ProjectFixture} from 'sentry-fixture/project';
 
-import {render, screen} from 'sentry-test/reactTestingLibrary';
+import {render, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import ProjectsStore from 'sentry/stores/projectsStore';
 import {useLocation} from 'sentry/utils/useLocation';
@@ -55,15 +55,16 @@ describe('BackendOverviewPage', () => {
       });
       render(<BackendOverviewPage />, {organization});
 
-      expect(await screen.findByRole('heading', {level: 1})).toHaveTextContent('Backend');
-      expect(mainTableApiCall).toHaveBeenCalledWith(
-        '/organizations/org-slug/events/',
-        expect.objectContaining({
-          query: expect.objectContaining({
-            query:
-              'transaction:transaction-name ( ( !transaction.op:pageload !transaction.op:navigation !transaction.op:ui.render !transaction.op:interaction !transaction.op:ui.action.swipe !transaction.op:ui.action.scroll !transaction.op:ui.action.click !transaction.op:ui.action !transaction.op:ui.load !transaction.op:app.lifecycle !project.id:[1] ) OR ( transaction.op:http.server ) ) event.type:transaction',
-          }),
-        })
+      await waitFor(() =>
+        expect(mainTableApiCall).toHaveBeenCalledWith(
+          '/organizations/org-slug/events/',
+          expect.objectContaining({
+            query: expect.objectContaining({
+              query:
+                'transaction:transaction-name ( ( !transaction.op:pageload !transaction.op:navigation !transaction.op:ui.render !transaction.op:interaction !transaction.op:ui.action.swipe !transaction.op:ui.action.scroll !transaction.op:ui.action.click !transaction.op:ui.action !transaction.op:ui.load !transaction.op:app.lifecycle !project.id:[1] ) OR ( transaction.op:http.server ) ) event.type:transaction',
+            }),
+          })
+        )
       );
     });
   });

static/app/views/insights/pages/backend/backendOverviewPage.tsx

@@ -34,15 +34,13 @@ import {useDefaultToAllProjects} from 'sentry/views/insights/common/utils/useDef
 import {useInsightsEap} from 'sentry/views/insights/common/utils/useEap';
 import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters';
 import {Am1BackendOverviewPage} from 'sentry/views/insights/pages/backend/am1BackendOverviewPage';
-import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader';
 import {
   BackendOverviewTable,
   isAValidSort,
   type ValidSort,
 } from 'sentry/views/insights/pages/backend/backendTable';
 import {Referrer} from 'sentry/views/insights/pages/backend/referrers';
 import {
-  BACKEND_LANDING_TITLE,
   DEFAULT_SORT,
   OVERVIEW_PAGE_ALLOWED_OPS,
 } from 'sentry/views/insights/pages/backend/settings';
@@ -72,7 +70,7 @@ function BackendOverviewPage() {
     return <LaravelOverviewPage />;
   }
   if (isNextJsPageEnabled) {
-    return <NextJsOverviewPage performanceType="backend" />;
+    return <NextJsOverviewPage />;
   }
   if (isNewBackendExperienceEnabled) {
     return <EAPBackendOverviewPage />;
@@ -203,7 +201,6 @@ function EAPBackendOverviewPage() {
       organization={organization}
       renderDisabled={NoAccess}
     >
-      <BackendHeader headerTitle={BACKEND_LANDING_TITLE} />
       <Layout.Body>
         <Layout.Main fullWidth>
           <ModuleLayout.Layout>

static/app/views/insights/pages/backend/layout.tsx

@@ -0,0 +1,18 @@
+import {Fragment} from 'react';
+import {Outlet, useMatches} from 'react-router-dom';
+
+import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader';
+import {ModuleName} from 'sentry/views/insights/types';
+
+function BackendLayout() {
+  const handle = useMatches().at(-1)?.handle as {module?: ModuleName} | undefined;
+
+  return (
+    <Fragment>
+      {handle && 'module' in handle ? <BackendHeader module={handle.module} /> : null}
+      <Outlet />
+    </Fragment>
+  );
+}
+
+export default BackendLayout;

static/app/views/insights/pages/frontend/frontendOverviewPage.tsx

@@ -236,7 +236,7 @@ function FrontendOverviewPageWithProviders() {
 
   let overviewPage = <Am1FrontendOverviewPage />;
   if (isNextJsPageEnabled) {
-    overviewPage = <NextJsOverviewPage performanceType="frontend" />;
+    overviewPage = <NextJsOverviewPage />;
   } else if (useEap) {
     overviewPage = <FrontendOverviewPage />;
   }

static/app/views/insights/pages/platform/laravel/index.tsx

@@ -83,7 +83,7 @@ export function LaravelOverviewPage() {
   }
 
   return (
-    <PlatformLandingPageLayout performanceType="backend">
+    <PlatformLandingPageLayout>
       <WidgetGrid>
         <WidgetGrid.Position1>
           <OverviewRequestsChartWidget />

static/app/views/insights/pages/platform/nextjs/index.tsx

@@ -33,11 +33,7 @@ function isTableType(value: any): value is TableType {
 const TableControl = SegmentedControl<TableType>;
 const TableControlItem = SegmentedControl.Item<TableType>;
 
-export function NextJsOverviewPage({
-  performanceType,
-}: {
-  performanceType: 'backend' | 'frontend';
-}) {
+export function NextJsOverviewPage() {
   const organization = useOrganization();
   const location = useLocation();
   const navigate = useNavigate();
@@ -89,7 +85,7 @@ export function NextJsOverviewPage({
   );
 
   return (
-    <PlatformLandingPageLayout performanceType={performanceType}>
+    <PlatformLandingPageLayout>
       <WidgetGrid>
         <WidgetGrid.Position1>
           <OverviewPageloadsChartWidget />

static/app/views/insights/pages/platform/shared/layout.tsx

@@ -14,8 +14,6 @@ import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLay
 import {InsightsProjectSelector} from 'sentry/views/insights/common/components/projectSelector';
 import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
 import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
-import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader';
-import {BACKEND_LANDING_TITLE} from 'sentry/views/insights/pages/backend/settings';
 import {useTransactionNameQuery} from 'sentry/views/insights/pages/platform/shared/useTransactionNameQuery';
 import {LegacyOnboarding} from 'sentry/views/performance/onboarding';
 import {getTransactionSearchQuery} from 'sentry/views/performance/utils';
@@ -34,13 +32,7 @@ function getFreeTextFromQuery(query: string) {
   return '';
 }
 
-export function PlatformLandingPageLayout({
-  children,
-  performanceType,
-}: {
-  children: React.ReactNode;
-  performanceType: 'backend' | 'frontend';
-}) {
+export function PlatformLandingPageLayout({children}: {children: React.ReactNode}) {
   const location = useLocation();
   const organization = useOrganization();
   const onboardingProject = useOnboardingProject();
@@ -56,9 +48,6 @@ export function PlatformLandingPageLayout({
       organization={organization}
       renderDisabled={NoAccess}
     >
-      {performanceType === 'backend' ? (
-        <BackendHeader headerTitle={BACKEND_LANDING_TITLE} />
-      ) : null}
       <Layout.Body>
         <Layout.Main fullWidth>
           <ModuleLayout.Layout>

static/app/views/insights/queues/views/queuesLandingPage.tsx

@@ -20,7 +20,6 @@ import {ModulesOnboarding} from 'sentry/views/insights/common/components/modules
 import QueuesLandingLatencyChartWidget from 'sentry/views/insights/common/components/widgets/queuesLandingLatencyChartWidget';
 import QueuesLandingThroughputChartWidget from 'sentry/views/insights/common/components/widgets/queuesLandingThroughputChartWidget';
 import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters';
-import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader';
 import {
   isAValidSort,
   QueuesTable,
@@ -72,8 +71,6 @@ function QueuesLandingPage() {
 
   return (
     <Fragment>
-      <BackendHeader module={ModuleName.QUEUE} />
-
       <ModuleFeature moduleName={ModuleName.QUEUE}>
         <Layout.Body>
           <Layout.Main fullWidth>