Introduces event queue processor to create a consistent UI (#11780)

extensions/sql-migration/src/models/migrationWizardPage.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as azdata from 'azdata';
-import { MigrationStateModel } from './stateMachine';
+import { MigrationStateModel, StateChangeEvent } from './stateMachine';
 export abstract class MigrationWizardPage {
 	constructor(protected readonly wizardPage: azdata.window.WizardPage, protected readonly migrationStateModel: MigrationStateModel) { }
 
@@ -16,5 +16,37 @@ export abstract class MigrationWizardPage {
 
 	public abstract async onPageEnter(): Promise<void>;
 	public abstract async onPageLeave(): Promise<void>;
+
+	private readonly stateChanges: (() => Promise<void>)[] = [];
+	protected async onStateChangeEvent(e: StateChangeEvent) {
+
+		this.stateChanges.push((): Promise<void> => {
+			return this.handleStateChange(e);
+		});
+
+		this.enableQueueProcessor();
+	}
+
+	private queueActive = false;
+	private async enableQueueProcessor(): Promise<void> {
+		if (this.queueActive) {
+			return;
+		}
+		this.queueActive = true;
+		while (true) {
+			const stateChangeFunction = this.stateChanges.shift();
+			if (!stateChangeFunction) {
+				break;
+			}
+			try {
+				await stateChangeFunction();
+			} catch (ex) {
+				console.error(ex);
+			}
+		}
+		this.queueActive = false;
+	}
+
+	protected abstract async handleStateChange(e: StateChangeEvent): Promise<void>;
 }