fix(editor): Fix broken element-plus loading spinner (no-changelog) (#7817)

<img width="976" alt="image"
src="https://github.com/n8n-io/n8n/assets/6179477/aea8a4c8-277e-4527-b6e9-a5c3427097b6">
<img width="117" alt="image"
src="https://github.com/n8n-io/n8n/assets/6179477/14c8876c-5e26-4154-9fdf-8b1fe9e5f806">

packages/design-system/src/css/common/var.scss

@@ -866,7 +866,7 @@ $datepicker-cell-hover-color: var(--color-foreground-xlight);
 /* Loading
 --------------------------*/
 /// height||Other|4
-$loading-spinner-size: 42px;
+$loading-spinner-size: 24px;
 /// height||Other|4
 $loading-fullscreen-spinner-size: 50px;
 

packages/design-system/src/css/loading.scss

@@ -27,6 +27,7 @@
 
 		.el-loading-spinner {
 			transform: translateY(-50%);
+			display: block;
 
 			.circular {
 				height: var.$loading-fullscreen-spinner-size;
@@ -42,6 +43,10 @@
 	width: 100%;
 	text-align: center;
 	position: absolute;
+	max-height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 
 	.el-loading-text {
 		color: var(--color-primary);
@@ -50,6 +55,7 @@
 	}
 
 	.circular {
+		max-height: 100%;
 		height: var.$loading-spinner-size;
 		width: var.$loading-spinner-size;
 		animation: loading-rotate 2s linear infinite;

packages/editor-ui/src/components/ExternalSecretsProviderConnectionSwitch.ee.vue

@@ -70,7 +70,7 @@ async function onUpdateConnected(value: boolean) {
 </script>
 
 <template>
-	<div class="connection-switch" v-loading="saving" element-loading-spinner="el-icon-loading">
+	<div class="connection-switch" v-loading="saving">
 		<n8n-icon
 			v-if="provider.state === 'error'"
 			color="danger"

packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue

@@ -35,7 +35,6 @@
 					"
 					active-color="#13ce66"
 					inactive-color="#8899AA"
-					element-loading-spinner="el-icon-loading"
 					data-test-id="workflow-activate-switch"
 				>
 				</el-switch>

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

@@ -15,7 +15,9 @@
 		</div>
 		<n8n-tooltip :disabled="!disabled" placement="bottom">
 			<template #content>
-				<div>{{ $locale.baseText('workflowActivator.thisWorkflowHasNoTriggerNodes') }}</div>
+				<div>
+					{{ $locale.baseText('workflowActivator.thisWorkflowHasNoTriggerNodes') }}
+				</div>
 			</template>
 			<el-switch
 				v-loading="updatingWorkflowActivation"
@@ -29,7 +31,6 @@
 				:disabled="disabled || updatingWorkflowActivation"
 				:active-color="getActiveColor"
 				inactive-color="#8899AA"
-				element-loading-spinner="el-icon-loading"
 				data-test-id="workflow-activate-switch"
 			>
 			</el-switch>
@@ -155,10 +156,6 @@ export default defineComponent({
 	display: inline-flex;
 	flex-wrap: nowrap;
 	align-items: center;
-
-	:deep(.el-loading-spinner) {
-		margin-top: -10px;
-	}
 }
 
 .could-not-be-started {

packages/editor-ui/src/composables/useLoadingService.ts

@@ -19,7 +19,6 @@ export function useLoadingService() {
 		loadingService.value = Loading.service({
 			lock: true,
 			text: text || i18n.baseText('genericHelpers.loading'),
-			spinner: 'el-icon-loading',
 			background: 'var(--color-dialog-overlay-background)',
 		}) as unknown as LoadingService;
 	}

packages/editor-ui/src/mixins/genericHelpers.ts

@@ -66,11 +66,9 @@ export const genericHelpers = defineComponent({
 				return;
 			}
 
-			// @ts-ignore
 			this.loadingService = this.$loading({
 				lock: true,
 				text: text || this.$locale.baseText('genericHelpers.loading'),
-				spinner: 'el-icon-loading',
 				background: 'var(--color-dialog-overlay-background)',
 			});
 		},