Variables: Fix for flickering repeat panels (#43447)

* Variables: Fix for flickering repeat panels

* Refactor: updates after PR comments

public/app/features/dashboard/state/DashboardModel.ts

@@ -49,7 +49,12 @@ import { RefreshEvent, TimeRangeUpdatedEvent } from '@grafana/runtime';
 import { sortedDeepCloneWithoutNulls } from 'app/core/utils/object';
 import { Subscription } from 'rxjs';
 import { appEvents } from '../../../core/core';
-import { VariablesChanged, VariablesChangedEvent, VariablesChangedInUrl } from '../../variables/types';
+import {
+  VariablesChanged,
+  VariablesChangedEvent,
+  VariablesChangedInUrl,
+  VariablesTimeRangeProcessDone,
+} from '../../variables/types';
 
 export interface CloneOptions {
   saveVariables?: boolean;
@@ -178,6 +183,9 @@ export class DashboardModel {
     this.appEventsSubscription = new Subscription();
     this.lastRefresh = Date.now();
     this.appEventsSubscription.add(appEvents.subscribe(VariablesChanged, this.variablesChangedHandler.bind(this)));
+    this.appEventsSubscription.add(
+      appEvents.subscribe(VariablesTimeRangeProcessDone, this.variablesTimeRangeProcessDoneHandler.bind(this))
+    );
     this.appEventsSubscription.add(
       appEvents.subscribe(VariablesChangedInUrl, this.variablesChangedInUrlHandler.bind(this))
     );
@@ -1210,8 +1218,15 @@ export class DashboardModel {
     });
   }
 
-  private variablesChangedHandler(event: VariablesChanged) {
+  private variablesTimeRangeProcessDoneHandler(event: VariablesTimeRangeProcessDone) {
+    const processRepeats = event.payload.variableIds.length > 0;
+    this.variablesChangedHandler(new VariablesChanged({ panelIds: [], refreshAll: true }), processRepeats);
+  }
+
+  private variablesChangedHandler(event: VariablesChanged, processRepeats = true) {
+    if (processRepeats) {
       this.processRepeats();
+    }
 
     if (event.payload.refreshAll || getTimeSrv().isRefreshOutsideThreshold(this.lastRefresh)) {
       this.startRefresh({ refreshAll: true, panelIds: [] });

public/app/features/variables/state/actions.ts

@@ -23,6 +23,7 @@ import {
   VariablesChanged,
   VariablesChangedEvent,
   VariablesChangedInUrl,
+  VariablesTimeRangeProcessDone,
   VariableWithMultiSupport,
   VariableWithOptions,
 } from '../types';
@@ -571,13 +572,14 @@ export const onTimeRangeUpdated = (
     return false;
   }) as VariableWithOptions[];
 
+  const variableIds = variablesThatNeedRefresh.map((variable) => variable.id);
   const promises = variablesThatNeedRefresh.map((variable: VariableWithOptions) =>
     dispatch(timeRangeUpdated(toVariableIdentifier(variable)))
   );
 
   try {
     await Promise.all(promises);
-    dependencies.events.publish(new VariablesChanged({ panelIds: [], refreshAll: true }));
+    dependencies.events.publish(new VariablesTimeRangeProcessDone({ variableIds }));
   } catch (error) {
     console.error(error);
     dispatch(notifyApp(createVariableErrorNotification('Template variable service failed', error)));

public/app/features/variables/types.ts

@@ -162,6 +162,14 @@ export class VariablesChanged extends BusEventWithPayload<VariablesChangedEvent>
   static type = 'variables-changed';
 }
 
+export interface VariablesTimeRangeProcessDoneEvent {
+  variableIds: string[];
+}
+
+export class VariablesTimeRangeProcessDone extends BusEventWithPayload<VariablesTimeRangeProcessDoneEvent> {
+  static type = 'variables-time-range-process-done';
+}
+
 export class VariablesChangedInUrl extends BusEventWithPayload<VariablesChangedEvent> {
   static type = 'variables-changed-in-url';
 }