diff --git a/extensions/schema-compare/src/dialogs/schemaCompareOptionsDialog.ts b/extensions/schema-compare/src/dialogs/schemaCompareOptionsDialog.ts
index efbfefbb64..b02aebb369 100644
--- a/extensions/schema-compare/src/dialogs/schemaCompareOptionsDialog.ts
+++ b/extensions/schema-compare/src/dialogs/schemaCompareOptionsDialog.ts
@@ -117,6 +117,23 @@ export class SchemaCompareOptionsDialog {
 
 	private initializeSchemaCompareOptionsDialogTab(): void {
 		this.generalOptionsTab.registerContent(async view => {
+			// create loading component
+			const loader = view.modelBuilder.loadingComponent()
+				.withProps({
+					CSSStyles: {
+						'margin-top': '50%'
+					}
+				})
+				.component();
+
+			this.optionsFlexBuilder = view.modelBuilder.flexContainer()
+				.withLayout({
+					flexFlow: 'column'
+				}).component();
+
+			// adding loading component to the flexcontainer
+			this.optionsFlexBuilder.addItem(loader);
+			await view.initializeModel(this.optionsFlexBuilder);
 
 			this.descriptionHeading = view.modelBuilder.table().withProps({
 				data: [],
@@ -159,14 +176,10 @@ export class SchemaCompareOptionsDialog {
 				}
 			}));
 
-			this.optionsFlexBuilder = view.modelBuilder.flexContainer()
-				.withLayout({
-					flexFlow: 'column'
-				}).component();
-
 			this.optionsFlexBuilder.addItem(this.optionsTable, { CSSStyles: { 'overflow': 'scroll', 'height': '65vh' } });
 			this.optionsFlexBuilder.addItem(this.descriptionHeading, { CSSStyles: { 'font-weight': 'bold', 'height': '30px' } });
 			this.optionsFlexBuilder.addItem(this.descriptionText, { CSSStyles: { 'padding': '4px', 'margin-right': '10px', 'overflow': 'scroll', 'height': '10vh' } });
+			loader.loading = false;
 			await view.initializeModel(this.optionsFlexBuilder);
 			await this.optionsTable.focus();
 		});