fix(editor): Add loading skeletons to Executions list page (#6184)

* fix(editor): Add loading skeletons to Executions list page

* fix(editor): lint fix

* fix(editor): fix loading

* fix(editor): fix loading

* fix(editor): fix keys

* fix(editor): fix localization

* fix(editor): fix key

packages/editor-ui/src/components/ExecutionsList.vue

@@ -4,7 +4,9 @@
 			<div :class="$style.execListHeader">
 				<n8n-heading tag="h1" size="2xlarge">{{ this.pageTitle }}</n8n-heading>
 				<div :class="$style.execListHeaderControls">
+					<n8n-loading v-if="isMounting" :class="$style.filterLoader" variant="custom" />
 					<el-checkbox
+						v-else
 						class="mr-xl"
 						v-model="autoRefresh"
 						@change="handleAutoRefreshToggle"
@@ -12,7 +14,11 @@
 					>
 						{{ $locale.baseText('executionsList.autoRefresh') }}
 					</el-checkbox>
-					<execution-filter :workflows="workflows" @filterChanged="onFilterChanged" />
+					<execution-filter
+						v-show="!isMounting"
+						:workflows="workflows"
+						@filterChanged="onFilterChanged"
+					/>
 				</div>
 			</div>
 
@@ -30,7 +36,12 @@
 				data-test-id="select-all-executions-checkbox"
 			/>
 
-			<table :class="$style.execTable">
+			<div v-if="isMounting">
+				<n8n-loading :class="$style.tableLoader" variant="custom" />
+				<n8n-loading :class="$style.tableLoader" variant="custom" />
+				<n8n-loading :class="$style.tableLoader" variant="custom" />
+			</div>
+			<table v-else :class="$style.execTable">
 				<thead>
 					<tr>
 						<th>
@@ -210,7 +221,7 @@
 			</table>
 
 			<div
-				v-if="!combinedExecutions.length"
+				v-if="!combinedExecutions.length && !isMounting && !isDataLoading"
 				:class="$style.loadedAll"
 				data-test-id="execution-list-empty"
 			>
@@ -231,7 +242,11 @@
 					data-test-id="load-more-button"
 				/>
 			</div>
-			<div v-else :class="$style.loadedAll" data-test-id="execution-all-loaded">
+			<div
+				v-else-if="!isMounting && !isDataLoading"
+				:class="$style.loadedAll"
+				data-test-id="execution-all-loaded"
+			>
 				{{ $locale.baseText('executionsList.loadedAll') }}
 			</div>
 		</div>
@@ -300,6 +315,7 @@ export default mixins(externalHooks, genericHelpers, executionHelpers, showMessa
 	},
 	data() {
 		return {
+			isMounting: true,
 			finishedExecutions: [] as IExecutionsSummary[],
 			finishedExecutionsCount: 0,
 			finishedExecutionsCountEstimated: false,
@@ -326,7 +342,6 @@ export default mixins(externalHooks, genericHelpers, executionHelpers, showMessa
 	},
 	async created() {
 		await this.loadWorkflows();
-		//await this.refreshData();
 		this.handleAutoRefreshToggle();
 
 		this.$externalHooks().run('executionsList.openDialog');
@@ -480,10 +495,11 @@ export default mixins(externalHooks, genericHelpers, executionHelpers, showMessa
 			this.allExistingSelected = false;
 			Vue.set(this, 'selectedItems', {});
 		},
-		onFilterChanged(filter: ExecutionFilterType) {
+		async onFilterChanged(filter: ExecutionFilterType) {
 			this.filter = filter;
-			this.refreshData();
+			await this.refreshData();
 			this.handleClearSelection();
+			this.isMounting = false;
 		},
 		handleActionItemClick(commandData: { command: string; execution: IExecutionsSummary }) {
 			if (['currentlySaved', 'original'].includes(commandData.command)) {
@@ -1134,4 +1150,15 @@ export default mixins(externalHooks, genericHelpers, executionHelpers, showMessa
 	margin: 0 0 var(--spacing-s) var(--spacing-s);
 	color: var(--color-danger);
 }
+
+.filterLoader {
+	width: 220px;
+	height: 32px;
+}
+
+.tableLoader {
+	width: 100%;
+	height: 48px;
+	margin-bottom: var(--spacing-2xs);
+}
 </style>