fix(ddm): Global loading state on zoom (#64861)

static/app/utils/metrics/useMetricsMeta.tsx

@@ -8,6 +8,7 @@ import type {MetricMeta, MRI, UseCase} from '../../types/metrics';
 
 import {getMetaDateTimeParams} from './index';
 
+const EMPTY_ARRAY: MetricMeta[] = [];
 const DEFAULT_USE_CASES = ['sessions', 'transactions', 'custom', 'spans'];
 
 export function getMetricsMetaQueryKeys(
@@ -91,9 +92,11 @@ export function useMetricsMeta(
   }
 
   return {
-    data: data.filter(meta => {
-      return meta.blockingStatus?.every(({isBlocked}) => !isBlocked) ?? true;
-    }),
+    data: isLoading
+      ? EMPTY_ARRAY
+      : data.filter(meta => {
+          return meta.blockingStatus?.every(({isBlocked}) => !isBlocked) ?? true;
+        }),
     isLoading,
   };
 }

static/app/views/ddm/context.tsx

@@ -17,10 +17,10 @@ import {
 } from 'sentry/utils/metrics';
 import {DEFAULT_SORT_STATE, emptyWidget} from 'sentry/utils/metrics/constants';
 import type {MetricWidgetQueryParams} from 'sentry/utils/metrics/types';
-import {useMetricsMeta} from 'sentry/utils/metrics/useMetricsMeta';
 import {decodeList} from 'sentry/utils/queryString';
 import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import usePageFilters from 'sentry/utils/usePageFilters';
+import useProjects from 'sentry/utils/useProjects';
 import useRouter from 'sentry/utils/useRouter';
 import type {FocusAreaSelection} from 'sentry/views/ddm/focusArea';
 import {useStructuralSharing} from 'sentry/views/ddm/useStructuralSharing';
@@ -35,9 +35,8 @@ export type FocusAreaProps = {
 interface DDMContextValue {
   addWidget: () => void;
   duplicateWidget: (index: number) => void;
+  hasMetrics: boolean;
   isDefaultQuery: boolean;
-  isLoading: boolean;
-  metricsMeta: ReturnType<typeof useMetricsMeta>['data'];
   removeWidget: (index: number) => void;
   selectedWidgetIndex: number;
   setDefaultQuery: (query: Record<string, any> | null) => void;
@@ -54,8 +53,7 @@ export const DDMContext = createContext<DDMContextValue>({
   addWidget: () => {},
   duplicateWidget: () => {},
   isDefaultQuery: false,
-  isLoading: false,
-  metricsMeta: [],
+  hasMetrics: false,
   removeWidget: () => {},
   selectedWidgetIndex: 0,
   setDefaultQuery: () => {},
@@ -198,6 +196,15 @@ const useDefaultQuery = () => {
   );
 };
 
+function useSelectedProjects() {
+  const {selection} = usePageFilters();
+  const {projects} = useProjects();
+
+  return useMemo(() => {
+    return projects.filter(project => selection.projects.includes(Number(project.id)));
+  }, [selection.projects, projects]);
+}
+
 export function DDMContextProvider({children}: {children: React.ReactNode}) {
   const router = useRouter();
   const updateQuery = useUpdateQuery();
@@ -210,7 +217,16 @@ export function DDMContextProvider({children}: {children: React.ReactNode}) {
   const [highlightedSampleId, setHighlightedSampleId] = useState<string | undefined>();
 
   const pageFilters = usePageFilters().selection;
-  const {data: metricsMeta, isLoading} = useMetricsMeta(pageFilters);
+
+  const selectedProjects = useSelectedProjects();
+  const hasMetrics = useMemo(
+    () =>
+      selectedProjects.some(
+        project =>
+          project.hasCustomMetrics || project.hasSessions || project.firstTransactionEvent
+      ),
+    [selectedProjects]
+  );
 
   const focusAreaSelection = useMemo<FocusAreaSelection | undefined>(
     () => router.location.query.focusArea && JSON.parse(router.location.query.focusArea),
@@ -284,8 +300,7 @@ export function DDMContextProvider({children}: {children: React.ReactNode}) {
       removeWidget,
       duplicateWidget: handleDuplicate,
       widgets,
-      isLoading,
-      metricsMeta,
+      hasMetrics,
       focusArea,
       setDefaultQuery,
       isDefaultQuery,
@@ -300,8 +315,7 @@ export function DDMContextProvider({children}: {children: React.ReactNode}) {
       handleUpdateWidget,
       removeWidget,
       handleDuplicate,
-      isLoading,
-      metricsMeta,
+      hasMetrics,
       focusArea,
       setDefaultQuery,
       isDefaultQuery,

static/app/views/ddm/layout.tsx

@@ -8,7 +8,6 @@ import {Button} from 'sentry/components/button';
 import FeatureBadge from 'sentry/components/featureBadge';
 import FloatingFeedbackWidget from 'sentry/components/feedback/widget/floatingFeedbackWidget';
 import * as Layout from 'sentry/components/layouts/thirds';
-import LoadingIndicator from 'sentry/components/loadingIndicator';
 import OnboardingPanel from 'sentry/components/onboardingPanel';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
@@ -29,8 +28,7 @@ import {WidgetDetails} from 'sentry/views/ddm/widgetDetails';
 
 export const DDMLayout = memo(() => {
   const organization = useOrganization();
-  const {metricsMeta, isLoading} = useDDMContext();
-  const hasMetrics = !isLoading && metricsMeta.length > 0;
+  const {hasMetrics} = useDDMContext();
   const {activateSidebar} = useMetricsOnboardingSidebar();
 
   const addCustomMetric = useCallback(
@@ -81,9 +79,7 @@ export const DDMLayout = memo(() => {
               <DatePageFilter />
             </PageFilterBar>
           </PaddedContainer>
-          {isLoading ? (
-            <LoadingIndicator />
-          ) : hasMetrics ? (
+          {hasMetrics ? (
             <Fragment>
               <Queries />
               <MetricScratchpad />

static/app/views/ddm/queryBuilder.tsx

@@ -25,10 +25,11 @@ import type {
 } from 'sentry/utils/metrics/types';
 import {useBreakpoints} from 'sentry/utils/metrics/useBreakpoints';
 import {useIncrementQueryMetric} from 'sentry/utils/metrics/useIncrementQueryMetric';
+import {useMetricsMeta} from 'sentry/utils/metrics/useMetricsMeta';
 import {useMetricsTags} from 'sentry/utils/metrics/useMetricsTags';
 import {middleEllipsis} from 'sentry/utils/middleEllipsis';
 import useKeyPress from 'sentry/utils/useKeyPress';
-import {useDDMContext} from 'sentry/views/ddm/context';
+import usePageFilters from 'sentry/utils/usePageFilters';
 import {MetricSearchBar} from 'sentry/views/ddm/metricSearchBar';
 
 type QueryBuilderProps = {
@@ -58,7 +59,8 @@ export const QueryBuilder = memo(function QueryBuilder({
   powerUserMode,
   onChange,
 }: QueryBuilderProps) {
-  const {metricsMeta: meta} = useDDMContext();
+  const pageFilters = usePageFilters();
+  const {data: meta} = useMetricsMeta(pageFilters.selection);
   const mriModeKeyPressed = useKeyPress('`', undefined, true);
   const [mriMode, setMriMode] = useState(powerUserMode); // power user mode that shows raw MRI instead of metrics names
   const breakpoints = useBreakpoints();
@@ -70,7 +72,9 @@ export const QueryBuilder = memo(function QueryBuilder({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mriModeKeyPressed, powerUserMode]);
 
-  const {data: tags = []} = useMetricsTags(metricsQuery.mri, {projects});
+  const {data: tags = [], isLoading: tagsIsLoading} = useMetricsTags(metricsQuery.mri, {
+    projects,
+  });
 
   const displayedMetrics = useMemo(() => {
     if (mriMode) {
@@ -194,7 +198,7 @@ export const QueryBuilder = memo(function QueryBuilder({
                 </Fragment>
               ),
             }))}
-            disabled={!metricsQuery.mri}
+            disabled={!metricsQuery.mri || tagsIsLoading}
             value={metricsQuery.groupBy}
             onChange={handleGroupByChange}
           />