OU-762: fix flicker on trace detail page

web/src/TracingApp.tsx

@@ -1,11 +1,29 @@
 import React, { ReactNode } from 'react';
 import { QueryParamProvider } from 'use-query-params';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactRouterAdapter } from './react_router_adapter';
 
 interface TracingAppProps {
   children: ReactNode;
 }
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 0,
+    },
+  },
+});
+
+/**
+ * TracingApp is the common entrypoint for all Distributed Tracing UI pages.
+ * It initializes @tanstack/react-query and use-query-params.
+ */
 export function TracingApp({ children }: TracingAppProps) {
-  return <QueryParamProvider adapter={ReactRouterAdapter}>{children}</QueryParamProvider>;
+  return (
+    <QueryClientProvider client={queryClient}>
+      <QueryParamProvider adapter={ReactRouterAdapter}>{children}</QueryParamProvider>
+    </QueryClientProvider>
+  );
 }

web/src/components/PersesWrapper.tsx

@@ -25,7 +25,6 @@ import {
 } from '@perses-dev/core';
 import panelsResource from '@perses-dev/panels-plugin/plugin.json';
 import tempoResource from '@perses-dev/tempo-plugin/plugin.json';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { DatasourceApi, DatasourceStoreProvider, VariableProvider } from '@perses-dev/dashboards';
 import { ChartThemeColor, getThemeColors } from '@patternfly/react-charts';
 import { TempoInstance } from '../hooks/useTempoInstance';
@@ -86,15 +85,6 @@ const pluginLoader = dynamicImportPluginLoader([
   },
 ]);
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-      retry: 0,
-    },
-  },
-});
-
 interface PersesWrapperProps {
   children?: React.ReactNode;
 }
@@ -125,9 +115,7 @@ export function PersesWrapper({ children }: PersesWrapperProps) {
   return (
     <ThemeProvider theme={muiTheme}>
       <ChartsProvider chartsTheme={chartsTheme}>
-        <PluginRegistry pluginLoader={pluginLoader}>
-          <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-        </PluginRegistry>
+        <PluginRegistry pluginLoader={pluginLoader}>{children}</PluginRegistry>
       </ChartsProvider>
     </ThemeProvider>
   );

web/src/pages/TraceDetailPage.tsx

@@ -17,16 +17,8 @@ import { TracingApp } from '../TracingApp';
 import { memo } from 'react';
 
 function TraceDetailPage() {
-  const { t } = useTranslation('plugin__distributed-tracing-console-plugin');
-  const { traceId } = useParams();
-
   return (
     <TracingApp>
-      <Helmet>
-        <title>
-          {t('Trace')} {traceId} · {t('Tracing')}
-        </title>
-      </Helmet>
       <PersesWrapper>
         <PersesDashboardWrapper>
           <TraceDetailPageBody />
@@ -56,9 +48,7 @@ function TraceDetailPageBody() {
           </BreadcrumbItem>
           <BreadcrumbItem isActive>{t('Trace details')}</BreadcrumbItem>
         </Breadcrumb>
-        <Title headingLevel="h1">
-          <TraceTitle />
-        </Title>
+        <PageTitle />
         <Divider className="pf-v6-u-mt-md" />
       </PageSection>
       <PageSection isFilled hasBodyWrapper={false}>
@@ -73,19 +63,31 @@ function TraceDetailPageBody() {
   );
 }
 
-function TraceTitle() {
+function PageTitle() {
+  const { t } = useTranslation('plugin__distributed-tracing-console-plugin');
+  const traceName = useTraceName();
+
+  return (
+    <>
+      <Helmet>
+        <title>
+          {t('Trace')} {traceName} · {t('Tracing')}
+        </title>
+      </Helmet>
+      <Title headingLevel="h1">{traceName}</Title>
+    </>
+  );
+}
+
+function useTraceName() {
   const { traceId } = useParams();
   const { queryResults } = useDataQueries('TraceQuery');
   const trace = queryResults[0]?.data?.trace;
 
   if (!trace) {
-    return <>{traceId}</>;
+    return traceId;
   }
-  return (
-    <>
-      {trace.rootSpan.resource.serviceName}: {trace.rootSpan.name}
-    </>
-  );
+  return `${trace.rootSpan.resource.serviceName}: ${trace.rootSpan.name}`;
 }
 
 const sval = (val?: TraceAttributeValue) =>