ref(dashboards): Lift up widget card lazy loading logic (#79856)

Instead of `noLazyLoad` prop, have parent explicitly wrap the render in
a `LazyRender` component. More explicit, and fewer gross conditionals in
the component.

static/app/views/dashboards/dashboard.spec.tsx

@@ -17,6 +17,10 @@ import {OrganizationContext} from '../organizationContext';
 
 import WidgetLegendSelectionState from './widgetLegendSelectionState';
 
+jest.mock('sentry/components/lazyRender', () => ({
+  LazyRender: ({children}: {children: React.ReactNode}) => children,
+}));
+
 describe('Dashboards > Dashboard', () => {
   const organization = OrganizationFixture({
     features: ['dashboards-basic', 'dashboards-edit'],

static/app/views/dashboards/sortableWidget.tsx

@@ -1,6 +1,7 @@
 import type {ComponentProps} from 'react';
 import styled from '@emotion/styled';
 
+import {LazyRender} from 'sentry/components/lazyRender';
 import PanelAlert from 'sentry/components/panels/panelAlert';
 import WidgetCard from 'sentry/views/dashboards/widgetCard';
 
@@ -72,15 +73,17 @@ function SortableWidget(props: Props) {
   return (
     <GridWidgetWrapper>
       <DashboardsMEPProvider>
-        <WidgetCard {...widgetProps} />
-        {props.isEditingDashboard && (
-          <Toolbar
-            onEdit={props.onEdit}
-            onDelete={props.onDelete}
-            onDuplicate={props.onDuplicate}
-            isMobile={props.isMobile}
-          />
-        )}
+        <LazyRender containerHeight={200} withoutContainer>
+          <WidgetCard {...widgetProps} />
+          {props.isEditingDashboard && (
+            <Toolbar
+              onEdit={props.onEdit}
+              onDelete={props.onDelete}
+              onDuplicate={props.onDuplicate}
+              isMobile={props.isMobile}
+            />
+          )}
+        </LazyRender>
       </DashboardsMEPProvider>
     </GridWidgetWrapper>
   );

static/app/views/dashboards/widgetBuilder/buildSteps/visualizationStep.tsx

@@ -136,7 +136,6 @@ export function VisualizationStep({
               <PanelAlert type="error">{errorMessage}</PanelAlert>
             )
           }
-          noLazyLoad
           isWidgetInvalid={isWidgetInvalid}
           onDataFetched={onDataFetched}
           onWidgetSplitDecision={onWidgetSplitDecision}

static/app/views/dashboards/widgetCard/index.spec.tsx

@@ -29,9 +29,6 @@ import {DashboardsMEPProvider} from './dashboardsMEPContext';
 
 jest.mock('sentry/components/charts/simpleTableChart', () => jest.fn(() => <div />));
 jest.mock('sentry/views/dashboards/widgetCard/releaseWidgetQueries');
-jest.mock('sentry/components/lazyRender', () => ({
-  LazyRender: ({children}: {children: React.ReactNode}) => children,
-}));
 
 describe('Dashboards > WidgetCard', function () {
   const {router, organization} = initializeOrg({

static/app/views/dashboards/widgetCard/index.tsx

@@ -7,7 +7,6 @@ import type {Client} from 'sentry/api';
 import type {BadgeProps} from 'sentry/components/badge/badge';
 import ErrorPanel from 'sentry/components/charts/errorPanel';
 import ErrorBoundary from 'sentry/components/errorBoundary';
-import {LazyRender} from 'sentry/components/lazyRender';
 import {isWidgetViewerPath} from 'sentry/components/modals/widgetViewerModal/utils';
 import Panel from 'sentry/components/panels/panel';
 import PanelAlert from 'sentry/components/panels/panelAlert';
@@ -72,7 +71,6 @@ type Props = WithRouterProps & {
   isPreview?: boolean;
   isWidgetInvalid?: boolean;
   legendOptions?: LegendComponentOption;
-  noLazyLoad?: boolean;
   onDataFetched?: (results: TableDataWithTitle[]) => void;
   onDelete?: () => void;
   onDuplicate?: () => void;
@@ -117,7 +115,6 @@ function WidgetCard(props: Props) {
     renderErrorMessage,
     tableItemLimit,
     windowWidth,
-    noLazyLoad,
     dashboardFilters,
     isWidgetInvalid,
     location,
@@ -226,28 +223,6 @@ function WidgetCard(props: Props) {
       )
     : [];
 
-  const visualization = (
-    <WidgetCardChartContainer
-      location={location}
-      api={api}
-      organization={organization}
-      selection={selection}
-      widget={widget}
-      isMobile={isMobile}
-      renderErrorMessage={renderErrorMessage}
-      tableItemLimit={tableItemLimit}
-      windowWidth={windowWidth}
-      onDataFetched={onDataFetched}
-      dashboardFilters={dashboardFilters}
-      chartGroup={DASHBOARD_CHART_GROUP}
-      onWidgetSplitDecision={onWidgetSplitDecision}
-      shouldResize={shouldResize}
-      onLegendSelectChanged={onLegendSelectChanged}
-      legendOptions={legendOptions}
-      widgetLegendState={widgetLegendState}
-    />
-  );
-
   return (
     <ErrorBoundary
       customComponent={<ErrorCard>{t('Error loading widget data')}</ErrorCard>}
@@ -276,12 +251,26 @@ function WidgetCard(props: Props) {
                 <IconWarning color="gray500" size="lg" />
               </StyledErrorPanel>
             </Fragment>
-          ) : noLazyLoad ? (
-            visualization
           ) : (
-            <LazyRender containerHeight={200} withoutContainer>
-              {visualization}
-            </LazyRender>
+            <WidgetCardChartContainer
+              location={location}
+              api={api}
+              organization={organization}
+              selection={selection}
+              widget={widget}
+              isMobile={isMobile}
+              renderErrorMessage={renderErrorMessage}
+              tableItemLimit={tableItemLimit}
+              windowWidth={windowWidth}
+              onDataFetched={onDataFetched}
+              dashboardFilters={dashboardFilters}
+              chartGroup={DASHBOARD_CHART_GROUP}
+              onWidgetSplitDecision={onWidgetSplitDecision}
+              shouldResize={shouldResize}
+              onLegendSelectChanged={onLegendSelectChanged}
+              legendOptions={legendOptions}
+              widgetLegendState={widgetLegendState}
+            />
           )}
         </WidgetFrame>
       </VisuallyCompleteWithData>