feat(dashboards): Slightly reduce lag when opening dashboard edit

static/app/views/dashboards/detail.tsx

@@ -35,7 +35,6 @@ import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {USING_CUSTOMER_DOMAIN} from 'sentry/constants';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import type {PageFilters} from 'sentry/types/core';
 import type {PlainRoute, RouteComponentProps} from 'sentry/types/legacyReactRouter';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
@@ -53,7 +52,6 @@ import type {ReactRouter3Navigate} from 'sentry/utils/useNavigate';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import withApi from 'sentry/utils/withApi';
 import withOrganization from 'sentry/utils/withOrganization';
-import withPageFilters from 'sentry/utils/withPageFilters';
 import withProjects from 'sentry/utils/withProjects';
 import {
   cloneDashboard,
@@ -132,7 +130,6 @@ type Props = RouteComponentProps<RouteParams> & {
   organization: Organization;
   projects: Project[];
   route: PlainRoute;
-  selection: PageFilters;
   theme: Theme;
   children?: React.ReactNode;
   newWidget?: Widget;
@@ -1334,6 +1331,6 @@ function DashboardDetailWithThemeAndNavigate(props: Omit<Props, 'theme' | 'navig
   return <DashboardDetail {...props} theme={theme} navigate={navigate} />;
 }
 
-export default withPageFilters(
-  withProjects(withApi(withOrganization(DashboardDetailWithThemeAndNavigate)))
+export default withProjects(
+  withApi(withOrganization(DashboardDetailWithThemeAndNavigate))
 );

static/app/views/dashboards/orgDashboards.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useRef, useState} from 'react';
+import {useEffect, useMemo, useRef, useState} from 'react';
 import isEqual from 'lodash/isEqual';
 
 import NotFound from 'sentry/components/errors/notFound';
@@ -8,8 +8,6 @@ import LoadingIndicator from 'sentry/components/loadingIndicator';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import {useApiQuery, useQueryClient} from 'sentry/utils/queryClient';
-import type {WithRouteAnalyticsProps} from 'sentry/utils/routeAnalytics/withRouteAnalytics';
-import withRouteAnalytics from 'sentry/utils/routeAnalytics/withRouteAnalytics';
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
@@ -27,12 +25,11 @@ type OrgDashboardsChildrenProps = {
   onDashboardUpdate: (updatedDashboard: DashboardDetails) => void;
 };
 
-type Props = WithRouteAnalyticsProps & {
+interface OrgDashboardsProps {
   children: (props: OrgDashboardsChildrenProps) => React.ReactNode;
-};
+}
 
-function OrgDashboards(props: Props) {
-  const {children} = props;
+function OrgDashboards({children}: OrgDashboardsProps) {
   const location = useLocation();
   const organization = useOrganization();
   const navigate = useNavigate();
@@ -70,7 +67,7 @@ function OrgDashboards(props: Props) {
     if (dashboardId && !isEqual(dashboardId, selectedDashboard?.id)) {
       setSelectedDashboardState(null);
     }
-  }, [dashboardId, selectedDashboard]);
+  }, [dashboardId, selectedDashboard?.id]);
 
   // If we don't have a selected dashboard, and one isn't going to arrive
   // we can redirect to the first dashboard in the list.
@@ -138,7 +135,7 @@ function OrgDashboards(props: Props) {
         {replace: true}
       );
     }
-  }, [location.query, navigate, organization]);
+  }, [location.query, navigate, organization.slug, organization.features]);
 
   useEffect(() => {
     // Clean up the query cache when the dashboard unmounts to prevent
@@ -150,6 +147,21 @@ function OrgDashboards(props: Props) {
     };
   }, [dashboardId, ENDPOINT, queryClient]);
 
+  const childrenProps = useMemo(
+    () => ({
+      error: Boolean(dashboardsError || selectedDashboardError),
+      dashboard: selectedDashboard
+        ? {
+            ...selectedDashboard,
+            widgets: selectedDashboard.widgets.map(assignTempId),
+          }
+        : null,
+      dashboards: Array.isArray(dashboards) ? dashboards : [],
+      onDashboardUpdate: setSelectedDashboardState,
+    }),
+    [dashboardsError, selectedDashboardError, selectedDashboard, dashboards]
+  );
+
   if (isDashboardsPending || isSelectedDashboardLoading) {
     return (
       <Layout.Page withPadding>
@@ -185,35 +197,11 @@ function OrgDashboards(props: Props) {
     return <LoadingError />;
   }
 
-  const getDashboards = (): DashboardListItem[] => {
-    return Array.isArray(dashboards) ? dashboards : [];
-  };
-
-  const renderContent = () => {
-    // Ensure there are always tempIds for grid layout
-    // This is needed because there are cases where the dashboard
-    // renders before the onRequestSuccess setState is processed
-    // and will caused stacked widgets because of missing tempIds
-    const dashboard = selectedDashboard
-      ? {
-          ...selectedDashboard,
-          widgets: selectedDashboard.widgets.map(assignTempId),
-        }
-      : null;
-
-    return children({
-      error: Boolean(dashboardsError || selectedDashboardError),
-      dashboard,
-      dashboards: getDashboards(),
-      onDashboardUpdate: setSelectedDashboardState,
-    });
-  };
-
   return (
     <SentryDocumentTitle title={t('Dashboards')} orgSlug={organization.slug}>
-      {renderContent()}
+      {children(childrenProps)}
     </SentryDocumentTitle>
   );
 }
 
-export default withRouteAnalytics(OrgDashboards);
+export default OrgDashboards;