From 7cc7f226e5ffcc208079ee8dcfac0c9c0fbed75f Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 27 Nov 2023 10:50:50 +0200
Subject: [PATCH] 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           | 2 +-
 packages/design-system/src/css/loading.scss              | 6 ++++++
 .../ExternalSecretsProviderConnectionSwitch.ee.vue       | 2 +-
 .../SettingsLogStreaming/EventDestinationCard.ee.vue     | 1 -
 packages/editor-ui/src/components/WorkflowActivator.vue  | 9 +++------
 packages/editor-ui/src/composables/useLoadingService.ts  | 1 -
 packages/editor-ui/src/mixins/genericHelpers.ts          | 2 --
 7 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/packages/design-system/src/css/common/var.scss b/packages/design-system/src/css/common/var.scss
index 50d9999a64..12d16555b8 100644
--- a/packages/design-system/src/css/common/var.scss
+++ b/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;
 
diff --git a/packages/design-system/src/css/loading.scss b/packages/design-system/src/css/loading.scss
index d13db8be39..93fa9df373 100644
--- a/packages/design-system/src/css/loading.scss
+++ b/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;
diff --git a/packages/editor-ui/src/components/ExternalSecretsProviderConnectionSwitch.ee.vue b/packages/editor-ui/src/components/ExternalSecretsProviderConnectionSwitch.ee.vue
index d56ead9a86..091219aedf 100644
--- a/packages/editor-ui/src/components/ExternalSecretsProviderConnectionSwitch.ee.vue
+++ b/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"
diff --git a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue b/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue
index 781584dbae..d146829eec 100644
--- a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue
+++ b/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>
diff --git a/packages/editor-ui/src/components/WorkflowActivator.vue b/packages/editor-ui/src/components/WorkflowActivator.vue
index 65edefbac4..40ac23f3ea 100644
--- a/packages/editor-ui/src/components/WorkflowActivator.vue
+++ b/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 {
diff --git a/packages/editor-ui/src/composables/useLoadingService.ts b/packages/editor-ui/src/composables/useLoadingService.ts
index 3ae53ed2c5..b773fa628d 100644
--- a/packages/editor-ui/src/composables/useLoadingService.ts
+++ b/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;
 	}
diff --git a/packages/editor-ui/src/mixins/genericHelpers.ts b/packages/editor-ui/src/mixins/genericHelpers.ts
index b92ec7eace..b48ccc3081 100644
--- a/packages/editor-ui/src/mixins/genericHelpers.ts
+++ b/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)',
 			});
 		},