fix: loading spinner finishes before all series load (#1729)

Closes #1654

Author: ethanalvizo

packages/chart/src/FigureChartModel.ts

@@ -157,6 +157,9 @@ class FigureChartModel extends ChartModel {
     const { charts } = this.figure;
     const axisTypeMap = ChartUtils.getAxisTypeMap(this.figure);
     const activeSeriesNames: string[] = [];
+
+    this.seriesToProcess = new Set();
+
     for (let i = 0; i < charts.length; i += 1) {
       const chart = charts[i];
 
@@ -216,7 +219,6 @@ class FigureChartModel extends ChartModel {
       const seriesName = inactiveSeriesNames[i];
       this.seriesDataMap.delete(seriesName);
     }
-    this.seriesToProcess = new Set([...this.seriesDataMap.keys()]);
   }
 
   /**
@@ -241,6 +243,7 @@ class FigureChartModel extends ChartModel {
     );
 
     this.seriesDataMap.set(series.name, seriesData);
+    this.seriesToProcess.add(series.name);
 
     this.data = [...this.seriesDataMap.values()];
 

packages/dashboard-core-plugins/src/panels/ChartPanel.test.tsx

@@ -96,8 +96,10 @@ function makeChartPanelWrapper({
   );
 }
 
-function callUpdateFunction() {
-  MockChart.mock.calls[MockChart.mock.calls.length - 1][0]?.onUpdate();
+function callUpdateFunction(isLoading = false) {
+  MockChart.mock.calls[MockChart.mock.calls.length - 1][0]?.onUpdate({
+    isLoading,
+  });
 }
 
 function callErrorFunction() {
@@ -390,6 +392,27 @@ it('shows loading spinner until an error is received B', async () => {
   checkPanelOverlays({ container, isLoading: false });
 });
 
+it('shows loading spinner until all series to process are loaded', async () => {
+  const filterFields = [];
+  const model = makeChartModel({ filterFields });
+  const modelPromise = Promise.resolve(model);
+  const makeModel = () => modelPromise;
+
+  const { container } = render(makeChartPanelWrapper({ makeModel }));
+
+  await act(() => expect(modelPromise).resolves.toBe(model));
+
+  // Overlays shouldn't appear yet because we haven't received an update or error event, should just see loading
+  expectLoading(container);
+
+  // Loading spinner should be shown until the update event is received and the isLoading flag is false
+  callUpdateFunction(true);
+  expectLoading(container);
+
+  callUpdateFunction(false);
+  expectNotLoading(container);
+});
+
 describe('linker column selection', () => {
   it('does not show overlay if linker active but no filterable columns', async () => {
     const model = makeChartModel();

packages/dashboard-core-plugins/src/panels/ChartPanel.tsx

@@ -174,6 +174,10 @@ interface ChartPanelState {
   panelState?: GLChartPanelState;
 }
 
+interface LoadState {
+  isLoading: boolean;
+}
+
 function hasInputFilter(
   panel: PanelProps
 ): panel is PanelProps & { inputFilters: InputFilter[] } {
@@ -714,8 +718,8 @@ export class ChartPanel extends Component<ChartPanelProps, ChartPanelState> {
     this.setActive(!isHidden);
   }
 
-  handleUpdate(): void {
-    this.setState({ isLoading: false });
+  handleUpdate({ isLoading }: LoadState): void {
+    this.setState({ isLoading });
   }
 
   handleClearAllFilters(): void {