QueryEditorRow: Only pass error to query editor if panel is not loading (#56350) (#56423)

(cherry picked from commit b3087cfcd1)

Co-authored-by: Kevin Yu <kevinwcyu@users.noreply.github.com>

public/app/features/query/components/QueryEditorRow.test.ts

@@ -109,6 +109,21 @@ describe('filterPanelDataToQuery', () => {
     const panelDataA = filterPanelDataToQuery(loadingData, 'A');
     expect(panelDataA?.state).toBe(LoadingState.Loading);
   });
+
+  it('should not set the state to error if the frame is still loading', () => {
+    const loadingData: PanelData = {
+      state: LoadingState.Loading,
+      series: [],
+      error: {
+        refId: 'B',
+        message: 'Error',
+      },
+      timeRange: { from: dateTime(), to: dateTime(), raw: { from: 'now-1d', to: 'now' } },
+    };
+
+    const panelDataA = filterPanelDataToQuery(loadingData, 'A');
+    expect(panelDataA?.state).toBe(LoadingState.Loading);
+  });
 });
 
 describe('frame results with warnings', () => {

public/app/features/query/components/QueryEditorRow.tsx

@@ -534,8 +534,8 @@ export interface AngularQueryComponentScope<TQuery extends DataQuery> {
 export function filterPanelDataToQuery(data: PanelData, refId: string): PanelData | undefined {
   const series = data.series.filter((series) => series.refId === refId);
 
-  // If there was an error with no data, pass it to the QueryEditors
-  if (data.error && !data.series.length) {
+  // If there was an error with no data and the panel is not in a loading state, pass it to the QueryEditors
+  if (data.state !== LoadingState.Loading && data.error && !data.series.length) {
     return {
       ...data,
       state: LoadingState.Error,