fix(ui): cross-domain server-side live preview throws postMessage error (#13825)

When using server-side live preview across domains, the initial
`postMessage` to the iframe throws the following error:

```txt
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://your-frontend.com') does not match the recipient window's origin ('https://your-backend.com').
```

This error is misleading, however, as it's thrown even when the iframe's
source exactly matches the post message's `targetOrigin`.

For example:

```ts
recipient.postMessage(message, targetOrigin)
```

The problem is that the initial message is sent before the iframe is
ready to receive it, resulting in the parent window posting to itself.
This is not a problem when the front-end is running on the same server,
but if the recipient changes while initializing, the target origin will
be mismatched.

Worth noting that this is not an issue with client-side live preview.

---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
  - https://app.asana.com/0/0/1211376499297320

Author: jacobsfletch

packages/ui/src/elements/LivePreview/Window/index.tsx

@@ -43,12 +43,12 @@ export const LivePreviewWindow: React.FC<EditViewProps> = (props) => {
   // Or it could be a separate popup window
   // We need to transmit data to both accordingly
   useEffect(() => {
-    if (!isLivePreviewing) {
+    if (!isLivePreviewing || !appIsReady) {
       return
     }
 
-    // For performance, do no reduce fields to values until after the iframe or popup has loaded
-    if (formState && window && 'postMessage' in window && appIsReady) {
+    // For performance, do not reduce fields to values until after the iframe or popup has loaded
+    if (formState) {
       const values = reduceFieldsToValues(formState, true)
 
       if (!values.id) {
@@ -95,7 +95,7 @@ export const LivePreviewWindow: React.FC<EditViewProps> = (props) => {
   // This is because the event will ultimately trigger a server-side roundtrip
   // i.e., save, save draft, autosave, etc. will fire `router.refresh()`
   useEffect(() => {
-    if (!isLivePreviewing) {
+    if (!isLivePreviewing || !appIsReady) {
       return
     }
 
@@ -112,7 +112,7 @@ export const LivePreviewWindow: React.FC<EditViewProps> = (props) => {
     if (previewWindowType === 'iframe' && iframeRef.current) {
       iframeRef.current.contentWindow?.postMessage(message, url)
     }
-  }, [mostRecentUpdate, iframeRef, popupRef, previewWindowType, url, isLivePreviewing])
+  }, [mostRecentUpdate, iframeRef, popupRef, previewWindowType, url, isLivePreviewing, appIsReady])
 
   if (previewWindowType === 'iframe') {
     return (