MC-2333: UX Review

- Refactored state logic

Author: nathanjosiah

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/block/preview.js

@@ -8,7 +8,7 @@
 <div class="pagebuilder-content-type pagebuilder-block" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
     <div attr="data.main.attributes" ko-style="data.main.style" css="data.main.css">
         <div if="displayPreview" class="rendered-content" html="data.main.html"></div>
-        <div if="displayPlaceholder" class="pagebuilder-block-placeholder">
+        <div ifnot="displayPreview" class="pagebuilder-block-placeholder">
             <span class="placeholder-text" text="placeholderText"/>
         </div>
     </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/block/default/preview.html

@@ -16,7 +16,6 @@ import BasePreview from "../preview";
 
 export default class Preview extends BasePreview {
     public displayPreview: KnockoutObservable<boolean> = ko.observable(false);
-    public displayPlaceholder: KnockoutObservable<boolean> = ko.observable(false);
     public loading: KnockoutObservable<boolean> = ko.observable(false);
     public placeholderText: KnockoutObservable<string>;
     private lastBlockId: number;
@@ -69,17 +68,14 @@ export default class Preview extends BasePreview {
             if (this.lastRenderedHtml) {
                 this.data.main.html(this.lastRenderedHtml);
                 this.displayPreview(true);
-                this.displayPlaceholder(false);
             }
         } else {
             this.displayPreview(false);
-            this.displayPlaceholder(true);
             this.placeholderText("");
         }
 
         if (!data.block_id || data.template.length === 0) {
             this.displayPreview(false);
-            this.displayPlaceholder(true);
             this.placeholderText(this.messages.NOT_SELECTED);
 
             return;
@@ -105,7 +101,6 @@ export default class Preview extends BasePreview {
                 // Empty content means something bad happened in the controller that didn't trigger a 5xx
                 if (typeof response.data !== "object") {
                     this.displayPreview(false);
-                    this.displayPlaceholder(true);
                     this.placeholderText(this.messages.UNKNOWN_ERROR);
 
                     return;
@@ -116,11 +111,9 @@ export default class Preview extends BasePreview {
 
                 if (response.data.content) {
                     this.displayPreview(true);
-                    this.displayPlaceholder(false);
                     this.data.main.html(response.data.content);
                 } else if (response.data.error) {
                     this.displayPreview(false);
-                    this.displayPlaceholder(true);
                     this.placeholderText(response.data.error);
                 }
 
@@ -130,7 +123,6 @@ export default class Preview extends BasePreview {
             })
             .fail(() => {
                 this.displayPreview(false);
-                this.displayPlaceholder(true);
                 this.placeholderText(this.messages.UNKNOWN_ERROR);
             })
             .always(() => {