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

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>

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>

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}}

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();
         }