feat: migrate editor-ui to Vite.js and various DX improvements (N8N-2277) (#4061)

* feat: Added vite.js dependencies.

* chore: Removed tests folder to follow same structure as design-system

* chore: Removed unused testing config.

* chore: Created vite.js index.html

* refactor: Updated scss structure and imports.

* refactor: Updated workflow building.

* fix: Cleared up all workflow dependency cycles. Added proper package.json imports config.

* feat: Got a working build using Vite. Need to fix issues next.

* fix: Progress! Getting process.env error.

* fix: Changed process.env to import.meta.env.

* fix: Fixed circular imports that used require(). Fixed monaco editor.

* chore: Removed commented code.

* chore: Cleaned up package.json

* feat: Made necessary changes to replace base path in css files.

* feat: Serve CSS files for `editor-ui` Vite migration (#4069)

⚡ Serve CSS files for Vite migration

* chore: Fixed package-lock.json.

* fix: Fixed build after centralized tsconfig update.

* fix: Removed lodash-es replacement.

* fix: Commented out vitest test command.

* style: Fixed linting issues.

* fix: Added lodash-es hotfix back.

* chore: Updated package-lock.json

* refactor: Renamed all n8n scss variables to no longer be defined as private.

* feat(editor): add application-wide el-button replacement.

* fix(editor): Fix import in page alert after merge.

* chore(editor): update package-lock.json.

* fix: Case sensitive lodash-es replacement for vue-agile.

* fix: add alias for lodash-es camelcase import.

* fix: add patch-package support for fixing quill

* feat: add patch-package on postinstall

* fix: update quill patch path.

* refactor: rename quill patch

* fix: update quill version.

* fix: update quill patch

* fix: fix linting rules after installing eslint in design-system

* fix: update date picker button to have primary color

* test: update callout component snapshots

* fix(editor): fix linting issues in editor after enabling eslint

* fix(cli): add /assets/* to auth ignore endpoints in server

* chore: update package-lock.json

* chore: update package-lock.json

* fix(editor): fix linting issues

* feat: add vite-legacy support

* fix: update workflow package interface imports to type imports.

* chore: update package-lock.json

* fix(editor) fix importing translations other than english

* fix(editor): remove test command until vitest is added

* fix: increase memory allocation for vite build

* fix: add patch-package patches to n8n-custom docker build

* fix: add performance and load time improvements

* fix: add proper typing to setNodeType

* chore: update package-lock.json

* style: use generic type for reduce in setNodeType

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>

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

@@ -0,0 +1,96 @@
+@use "mixins/mixins";
+@use "./common/var";
+
+@include mixins.b(loading-parent) {
+	@include mixins.m(relative) {
+		position: relative !important;
+	}
+
+	@include mixins.m(hidden) {
+		overflow: hidden !important;
+	}
+}
+
+@include mixins.b(loading-mask) {
+	position: absolute;
+	z-index: 2000;
+	background-color: rgba(255, 255, 255, 0.9);
+	margin: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	transition: opacity 0.3s;
+
+	@include mixins.when(fullscreen) {
+		position: fixed;
+
+		.el-loading-spinner {
+			margin-top: #{- var.$loading-fullscreen-spinner-size * 0.5};
+
+			.circular {
+				height: var.$loading-fullscreen-spinner-size;
+				width: var.$loading-fullscreen-spinner-size;
+			}
+		}
+	}
+}
+
+@include mixins.b(loading-spinner) {
+	top: 50%;
+	margin-top: #{- var.$loading-spinner-size * 0.5};
+	width: 100%;
+	text-align: center;
+	position: absolute;
+
+	.el-loading-text {
+		color: var(--color-primary);
+		margin: 3px 0;
+		font-size: 14px;
+	}
+
+	.circular {
+		height: var.$loading-spinner-size;
+		width: var.$loading-spinner-size;
+		animation: loading-rotate 2s linear infinite;
+	}
+
+	.path {
+		animation: loading-dash 1.5s ease-in-out infinite;
+		stroke-dasharray: 90, 150;
+		stroke-dashoffset: 0;
+		stroke-width: 2;
+		stroke: var(--color-primary);
+		stroke-linecap: round;
+	}
+
+	i {
+		color: var(--color-primary);
+	}
+}
+
+.el-loading-fade-enter,
+.el-loading-fade-leave-active {
+	opacity: 0;
+}
+
+@keyframes loading-rotate {
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes loading-dash {
+	0% {
+		stroke-dasharray: 1, 200;
+		stroke-dashoffset: 0;
+	}
+	50% {
+		stroke-dasharray: 90, 150;
+		stroke-dashoffset: -40px;
+	}
+	100% {
+		stroke-dasharray: 90, 150;
+		stroke-dashoffset: -120px;
+	}
+}