fix(discover): Add a loading/reloading state to metrics baseline (#39306)

This is to handle visual jank a little better when switching
projects. Also update beta badge.

static/app/components/charts/eventsChart.tsx

@@ -421,6 +421,10 @@ export type EventsChartProps = {
    * The interval resolution for a chart e.g. 1m, 5m, 1d
    */
   interval?: string;
+  /**
+   * Whether or not the request for processed baseline data has been resolved/terminated
+   */
+  loadingAdditionalSeries?: boolean;
   /**
    * Order condition when showing topEvents
    */
@@ -439,6 +443,7 @@ export type EventsChartProps = {
    */
   referrer?: string;
   releaseQueryExtra?: Query;
+  reloadingAdditionalSeries?: boolean;
   /**
    * Override the interval calculation and show daily results.
    */
@@ -538,6 +543,8 @@ class EventsChart extends React.Component<EventsChartProps> {
       withoutZerofill,
       fromDiscover,
       additionalSeries,
+      loadingAdditionalSeries,
+      reloadingAdditionalSeries,
       ...props
     } = this.props;
 
@@ -585,17 +592,17 @@ class EventsChart extends React.Component<EventsChartProps> {
       return (
         <TransitionChart
           loading={loading}
-          reloading={reloading}
+          reloading={reloading || !!reloadingAdditionalSeries}
           height={height ? `${height}px` : undefined}
         >
-          <TransparentLoadingMask visible={reloading} />
+          <TransparentLoadingMask visible={reloading || !!reloadingAdditionalSeries} />
 
           {React.isValidElement(chartHeader) && chartHeader}
 
           <ThemedChart
             zoomRenderProps={zoomRenderProps}
-            loading={loading}
-            reloading={reloading}
+            loading={loading || !!loadingAdditionalSeries}
+            reloading={reloading || !!reloadingAdditionalSeries}
             showLegend={showLegend}
             minutesThresholdToDisplaySeconds={minutesThresholdToDisplaySeconds}
             releaseSeries={releaseSeries || []}

static/app/views/eventsV2/chartFooter.tsx

@@ -129,7 +129,7 @@ export default function ChartFooter({
                 }
               )}
             />
-            <FeatureBadge type="alpha" />
+            <FeatureBadge type="beta" />
           </Fragment>
         </Feature>
         <Feature organization={organization} features={['discover-interval-selector']}>

static/app/views/eventsV2/metricsBaselineContainer.tsx

@@ -88,6 +88,7 @@ export function MetricsBaselineContainer({
   >(undefined);
   const [processedTotal, setProcessedTotal] = useState<number | undefined>(undefined);
   const [loadingTotals, setLoadingTotals] = useState<boolean>(true);
+  const [loadingSeries, setLoadingSeries] = useState<boolean>(true);
 
   useEffect(() => {
     let shouldCancelRequest = false;
@@ -98,6 +99,8 @@ export function MetricsBaselineContainer({
       return undefined;
     }
 
+    setLoadingTotals(true);
+
     doDiscoverQuery<EventsTableData>(api, `/organizations/${organization.slug}/events/`, {
       ...eventView.generateQueryStringObject(),
       field: ['count()'],
@@ -146,10 +149,14 @@ export function MetricsBaselineContainer({
     let shouldCancelRequest = false;
 
     if (!isRollingOut || disableProcessedBaselineToggle || !showBaseline) {
+      setLoadingSeries(false);
       setProcessedLineSeries(undefined);
       return undefined;
     }
 
+    setLoadingSeries(true);
+    setProcessedLineSeries(undefined);
+
     doEventsRequest(api, {
       organization,
       partial: true,
@@ -223,6 +230,7 @@ export function MetricsBaselineContainer({
           );
         }
 
+        setLoadingSeries(false);
         setMetricsCompatible(true);
         setProcessedLineSeries(additionalSeries);
       })
@@ -230,7 +238,9 @@ export function MetricsBaselineContainer({
         if (shouldCancelRequest) {
           return;
         }
+        setLoadingSeries(false);
         setMetricsCompatible(false);
+        setProcessedLineSeries(undefined);
       });
     return () => {
       shouldCancelRequest = true;
@@ -264,6 +274,8 @@ export function MetricsBaselineContainer({
       processedTotal={processedTotal}
       loadingProcessedTotals={loadingTotals}
       showBaseline={showBaseline}
+      loadingProcessedEventsBaseline={loadingSeries}
+      reloadingProcessedEventsBaseline={processedLineSeries !== null && loadingSeries}
       setShowBaseline={(value: boolean) => {
         router.push({
           pathname: location.pathname,

static/app/views/eventsV2/resultsChart.tsx

@@ -49,7 +49,9 @@ type ResultsChartProps = {
   router: InjectedRouter;
   yAxisValue: string[];
   customMeasurements?: CustomMeasurementCollection | undefined;
+  loadingProcessedEventsBaseline?: boolean;
   processedLineSeries?: LineSeriesOption[];
+  reloadingProcessedEventsBaseline?: boolean;
 };
 
 class ResultsChart extends Component<ResultsChartProps> {
@@ -75,6 +77,8 @@ class ResultsChart extends Component<ResultsChartProps> {
       yAxisValue,
       processedLineSeries,
       customMeasurements,
+      loadingProcessedEventsBaseline,
+      reloadingProcessedEventsBaseline,
     } = this.props;
 
     const hasPerformanceChartInterpolation = organization.features.includes(
@@ -168,6 +172,8 @@ class ResultsChart extends Component<ResultsChartProps> {
               fromDiscover
               disableableSeries={disableableSeries}
               additionalSeries={processedLineSeries}
+              loadingAdditionalSeries={loadingProcessedEventsBaseline}
+              reloadingAdditionalSeries={reloadingProcessedEventsBaseline}
             />
           ),
           fixed: <Placeholder height="200px" testId="skeleton-ui" />,
@@ -195,9 +201,11 @@ type ContainerProps = {
   // chart footer props
   total: number | null;
   yAxis: string[];
+  loadingProcessedEventsBaseline?: boolean;
   loadingProcessedTotals?: boolean;
   processedLineSeries?: LineSeriesOption[];
   processedTotal?: number;
+  reloadingProcessedEventsBaseline?: boolean;
 };
 
 type ContainerState = {
@@ -229,6 +237,13 @@ class ResultsChartContainer extends Component<ContainerProps, ContainerState> {
       return true;
     }
 
+    if (
+      nextProps.reloadingProcessedEventsBaseline ||
+      nextProps.loadingProcessedEventsBaseline
+    ) {
+      return false;
+    }
+
     return !isEqual(restProps, restNextProps);
   }
 
@@ -264,6 +279,8 @@ class ResultsChartContainer extends Component<ContainerProps, ContainerState> {
       setShowBaseline,
       processedTotal,
       loadingProcessedTotals,
+      loadingProcessedEventsBaseline,
+      reloadingProcessedEventsBaseline,
     } = this.props;
 
     const {yAxisOptions} = this.state;
@@ -314,6 +331,8 @@ class ResultsChartContainer extends Component<ContainerProps, ContainerState> {
                 confirmedQuery={confirmedQuery}
                 yAxisValue={yAxis}
                 processedLineSeries={processedLineSeries}
+                loadingProcessedEventsBaseline={loadingProcessedEventsBaseline}
+                reloadingProcessedEventsBaseline={reloadingProcessedEventsBaseline}
                 customMeasurements={contextValue?.customMeasurements}
               />
             )}