fix(dashboards): Remove waiting for animation on chart zoom (#93909)

This is causing zooming issues where the finish handler isn't triggering
and flushing the queued up time range changes (i.e. updating the URL
params so the remaining charts and page filters can update).

We've decided to immediately trigger the state changes because we know
the chart zoom callback consistently triggers

Author: narsaynorath

static/app/components/charts/chartZoom.tsx

@@ -154,38 +154,36 @@ class ChartZoom extends Component<Props> {
       end: endFormatted,
     });
 
-    this.zooming = () => {
-      if (usePageDate && router) {
-        const newQuery = {
-          ...router.location.query,
-          pageStart: start ? getUtcDateString(start) : undefined,
-          pageEnd: end ? getUtcDateString(end) : undefined,
-          pageStatsPeriod: period ?? undefined,
-        };
-
-        // Only push new location if query params has changed because this will cause a heavy re-render
-        if (qs.stringify(newQuery) !== qs.stringify(router.location.query)) {
-          router.push({
-            pathname: router.location.pathname,
-            query: newQuery,
-          });
-        }
-      } else {
-        updateDateTime(
-          {
-            period,
-            start: startFormatted
-              ? getUtcToLocalDateObject(startFormatted)
-              : startFormatted,
-            end: endFormatted ? getUtcToLocalDateObject(endFormatted) : endFormatted,
-          },
-          router,
-          {save: saveOnZoom}
-        );
+    if (usePageDate && router) {
+      const newQuery = {
+        ...router.location.query,
+        pageStart: start ? getUtcDateString(start) : undefined,
+        pageEnd: end ? getUtcDateString(end) : undefined,
+        pageStatsPeriod: period ?? undefined,
+      };
+
+      // Only push new location if query params has changed because this will cause a heavy re-render
+      if (qs.stringify(newQuery) !== qs.stringify(router.location.query)) {
+        router.push({
+          pathname: router.location.pathname,
+          query: newQuery,
+        });
       }
+    } else {
+      updateDateTime(
+        {
+          period,
+          start: startFormatted
+            ? getUtcToLocalDateObject(startFormatted)
+            : startFormatted,
+          end: endFormatted ? getUtcToLocalDateObject(endFormatted) : endFormatted,
+        },
+        router,
+        {save: saveOnZoom}
+      );
+    }
 
-      this.saveCurrentPeriod({period, start, end});
-    };
+    this.saveCurrentPeriod({period, start, end});
   };
 
   /**
@@ -290,17 +288,8 @@ class ChartZoom extends Component<Props> {
 
   /**
    * Chart event when *any* rendering+animation finishes
-   *
-   * `this.zooming` acts as a callback function so that
-   * we can let the native zoom animation on the chart complete
-   * before we update URL state and re-render
    */
   handleChartFinished = (_props: any, chart: any) => {
-    if (typeof this.zooming === 'function') {
-      this.zooming();
-      this.zooming = null;
-    }
-
     // This attempts to activate the area zoom toolbox feature
     const zoom = chart._componentsViews?.find((c: any) => c._features?.dataZoom);
     if (zoom && !zoom._features.dataZoom._isZoomActive) {

static/app/components/charts/useChartZoom.tsx

@@ -133,12 +133,6 @@ export function useChartZoom({
   const navigate = useNavigate();
   const router = useRouter();
 
-  /**
-   * Used to store the date update function so that we can call it after the chart
-   * animation is complete
-   */
-  const zooming = useRef<(() => void) | null>(null);
-
   /**
    * Sets the new period due to a zoom related action
    *
@@ -165,34 +159,32 @@ export function useChartZoom({
         end: getQueryTime(newPeriod.end),
       });
 
-      zooming.current = () => {
-        if (usePageDate) {
-          const newQuery = {
-            ...location.query,
-            pageStart: startFormatted,
-            pageEnd: endFormatted,
-            pageStatsPeriod: newPeriod.period ?? undefined,
-          };
+      if (usePageDate) {
+        const newQuery = {
+          ...location.query,
+          pageStart: startFormatted,
+          pageEnd: endFormatted,
+          pageStatsPeriod: newPeriod.period ?? undefined,
+        };
 
-          // Only push new location if query params has changed because this will cause a heavy re-render
-          if (qs.stringify(newQuery) !== qs.stringify(location.query)) {
-            navigate({
-              pathname: location.pathname,
-              query: newQuery,
-            });
-          }
-        } else {
-          updateDateTime(
-            {
-              period: newPeriod.period,
-              start: startFormatted,
-              end: endFormatted,
-            },
-            router,
-            {save: saveOnZoom}
-          );
+        // Only push new location if query params has changed because this will cause a heavy re-render
+        if (qs.stringify(newQuery) !== qs.stringify(location.query)) {
+          navigate({
+            pathname: location.pathname,
+            query: newQuery,
+          });
         }
-      };
+      } else {
+        updateDateTime(
+          {
+            period: newPeriod.period,
+            start: startFormatted,
+            end: endFormatted,
+          },
+          router,
+          {save: saveOnZoom}
+        );
+      }
     },
     [onZoom, navigate, location, router, saveOnZoom, usePageDate]
   );
@@ -231,11 +223,6 @@ export function useChartZoom({
    * before we update URL state and re-render
    */
   const handleChartFinished = useCallback<EChartFinishedHandler>((_props, chart) => {
-    if (typeof zooming.current === 'function') {
-      zooming.current();
-      zooming.current = null;
-    }
-
     // This attempts to activate the area zoom toolbox feature
     const zoom = (chart as any)._componentsViews?.find((c: any) => c._features?.dataZoom);
     if (zoom && !zoom._features.dataZoom._isZoomActive) {