From 2d6e406e215188dbbbeb593ac09ccad3914aaf81 Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Fri, 5 Jan 2024 09:04:39 -0500
Subject: [PATCH] fix(editor): Vertically center workflow preview loading state
 (#8231)

## Summary

Title self explanatory

before:

<img width="1198" alt="image"
src="https://github.com/n8n-io/n8n/assets/16496553/26c29cad-b376-40fd-9881-343f5e722d58">

now:

<img width="1211" alt="image"
src="https://github.com/n8n-io/n8n/assets/16496553/9f2d4020-6bf8-481a-b69f-eddb57cfaaae">



## Related tickets and issues
[ado-1645-fix-center-loading-preview-loading-state

](https://linear.app/n8n/issue/ADO-1645/fix-center-loading-preview-loading-state)

## Review / Merge checklist
- [ x] PR title and summary are descriptive. **Remember, the title
automatically goes into the changelog. Use `(no-changelog)` otherwise.**
([conventions](https://github.com/n8n-io/n8n/blob/master/.github/pull_request_title_conventions.md))
---
 packages/editor-ui/src/components/WorkflowPreview.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/editor-ui/src/components/WorkflowPreview.vue b/packages/editor-ui/src/components/WorkflowPreview.vue
index 86ec2fba3c..b79099d4bb 100644
--- a/packages/editor-ui/src/components/WorkflowPreview.vue
+++ b/packages/editor-ui/src/components/WorkflowPreview.vue
@@ -249,6 +249,10 @@ watch(
 
 .imageLoader {
 	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
 }
 
 .executionPreview {