From 08aa2d91babd286d9b8c0440114b3e03d2a5570a Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Thu, 19 May 2022 12:02:10 +0100
Subject: [PATCH] Skipped publish flow modal animations when swapping between
 publish/preview

no issue

- updated the publish/preview toggle action to pass a `skipAnimation` data attribute to the modals when opening if they are being swapped rather than initially opened
---
 .../components/editor-labs/modals/preview.hbs | 21 +++++++++++++++----
 .../editor-labs/modals/preview/browser.hbs    |  2 +-
 .../editor-labs/modals/publish-flow.hbs       |  2 +-
 .../editor-labs/publish-management.js         | 14 +++++++------
 4 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/ghost/admin/app/components/editor-labs/modals/preview.hbs b/ghost/admin/app/components/editor-labs/modals/preview.hbs
index fb6ae8991b..04cc8e3d06 100644
--- a/ghost/admin/app/components/editor-labs/modals/preview.hbs
+++ b/ghost/admin/app/components/editor-labs/modals/preview.hbs
@@ -51,21 +51,34 @@
         <GhLoadingSpinner />
     {{else}}
         {{#if (eq this.tab "browser")}}
-            <EditorLabs::Modals::Preview::Browser @post={{@data.publishOptions.post}} />
+            <EditorLabs::Modals::Preview::Browser
+                @post={{@data.publishOptions.post}}
+                @skipAnimation={{@data.skipAnimation}}
+            />
         {{/if}}
 
         {{#if (and (eq this.tab "mobile"))}}
-            <EditorLabs::Modals::Preview::Mobile @post={{@data.publishOptions.post}} />
+            <EditorLabs::Modals::Preview::Mobile
+                @post={{@data.publishOptions.post}}
+                @skipAnimation={{@data.skipAnimation}}
+            />
         {{/if}}
 
         {{#unless @data.publishOptions.user.isContributor}}
             {{#if (and (eq this.tab "email") @data.publishOptions.post.isPost)}}
-                <EditorLabs::Modals::Preview::Email @post={{@data.publishOptions.post}} @newsletter={{@data.publishOptions.newsletter}} />
+                <EditorLabs::Modals::Preview::Email
+                    @post={{@data.publishOptions.post}}
+                    @newsletter={{@data.publishOptions.newsletter}}
+                    @skipAnimation={{@data.skipAnimation}}
+                />
             {{/if}}
         {{/unless}}
 
         {{#if (eq this.tab "social")}}
-            <EditorLabs::Modals::Preview::Social @post={{@data.publishOptions.post}} />
+            <EditorLabs::Modals::Preview::Social
+                @post={{@data.publishOptions.post}}
+                @skipAnimation={{@data.skipAnimation}}
+            />
         {{/if}}
     {{/if}}
 </div>
\ No newline at end of file
diff --git a/ghost/admin/app/components/editor-labs/modals/preview/browser.hbs b/ghost/admin/app/components/editor-labs/modals/preview/browser.hbs
index 00d8592be3..f881b042a2 100644
--- a/ghost/admin/app/components/editor-labs/modals/preview/browser.hbs
+++ b/ghost/admin/app/components/editor-labs/modals/preview/browser.hbs
@@ -1,4 +1,4 @@
-<div class="gh-browserpreview-previewcontainer gh-post-preview-browser fade-in">
+<div class="gh-browserpreview-previewcontainer gh-post-preview-browser {{unless @skipAnimation "fade-in"}}">
     <div class="gh-browserpreview-browser">
         <div class="tabs">
             <ul><li></li><li></li><li></li></ul>
diff --git a/ghost/admin/app/components/editor-labs/modals/publish-flow.hbs b/ghost/admin/app/components/editor-labs/modals/publish-flow.hbs
index 8013d29430..962cbb6b3c 100644
--- a/ghost/admin/app/components/editor-labs/modals/publish-flow.hbs
+++ b/ghost/admin/app/components/editor-labs/modals/publish-flow.hbs
@@ -21,7 +21,7 @@
         {{/if}}
     </header>
 
-    <div class="gh-publish-settings-container fade-in">
+    <div class="gh-publish-settings-container {{unless @data.skipAnimation "fade-in"}}">
         {{#if this.emailErrorMessage}}
             <EditorLabs::Modals::PublishFlow::CompleteWithEmailError
                 @emailErrorMessage={{this.emailErrorMessage}}
diff --git a/ghost/admin/app/components/editor-labs/publish-management.js b/ghost/admin/app/components/editor-labs/publish-management.js
index 887745e86d..78c0a7c067 100644
--- a/ghost/admin/app/components/editor-labs/publish-management.js
+++ b/ghost/admin/app/components/editor-labs/publish-management.js
@@ -38,7 +38,7 @@ export default class PublishManagement extends Component {
     }
 
     @action
-    async openPublishFlow(event) {
+    async openPublishFlow(event, {skipAnimation} = {}) {
         event?.preventDefault();
 
         this.updateFlowModal?.close();
@@ -51,7 +51,8 @@ export default class PublishManagement extends Component {
             this.publishFlowModal = this.modals.open(PublishFlowModal, {
                 publishOptions: this.publishOptions,
                 saveTask: this.publishTask,
-                togglePreviewPublish: this.togglePreviewPublish
+                togglePreviewPublish: this.togglePreviewPublish,
+                skipAnimation
             });
 
             const result = await this.publishFlowModal;
@@ -87,7 +88,7 @@ export default class PublishManagement extends Component {
     }
 
     @action
-    openPreview(event) {
+    openPreview(event, {skipAnimation} = {}) {
         event?.preventDefault();
 
         if (!this.previewModal || this.previewModal.isClosing) {
@@ -100,7 +101,8 @@ export default class PublishManagement extends Component {
                 saveTask: this.saveTask,
                 togglePreviewPublish: this.togglePreviewPublish,
                 currentTab: this.previewTab,
-                changeTab: this.changePreviewTab
+                changeTab: this.changePreviewTab,
+                skipAnimation
             });
         }
     }
@@ -131,11 +133,11 @@ export default class PublishManagement extends Component {
         event?.preventDefault();
 
         if (this.previewModal && !this.previewModal.isClosing) {
-            this.openPublishFlow();
+            this.openPublishFlow(event, {skipAnimation: true});
             await timeout(160);
             this.previewModal.close();
         } else if (this.publishFlowModal && !this.publishFlowModal.isClosing) {
-            this.openPreview();
+            this.openPreview(event, {skipAnimation: true});
             await timeout(160);
             this.publishFlowModal.close();
         }