Blank Preview Component Displayed after page editor loaded.

[azharuddin-mulla-amla]

Description

After the page editor loads, the preview component remains blank. However, when you click anywhere on the page, the content of the page is displayed. This issue occurs immediately after loading and requires user interaction (click) to render the content properly.

Expected Behavior

The page content should display automatically after the loader stops, without requiring any user interaction (e.g., clicking anywhere on the page).

Actual Behavior

After the loader stops, the preview component remains blank. The page content is only displayed after the user clicks anywhere on the page.

Environment

• Puck Version: 0.16.2
• Browser: Google Chrome Version 131.0.6778.109 (Official Build) (64-bit)
• Node.js Version: v18.20.4
• OS: Windows 10

https://www.awesomescreenshot.com/video/34769859?key=5d5c9773c2614fd57f0760358b7289f2

[chrisvxd]

Hey @azharuddin-mulla-amla - could you share a reproduction repo? This sounds environment specific.

You may be able to force the render by disabled the iframe.waitForStyles API: https://puckeditor.com/docs/api-reference/components/puck#iframe

[azharuddin-mulla-amla]

<Puck config={config} data={props.data} onPublish={props.onPublish} overrides={overrides} onChange={onChangeDataToParentIframe} iframe={{ enabled: false, waitForStyles: false, }} />

 enable: false
 waitForStyles: false

Hey @chrisvxd - After added it is working but at the first time it is still blank unless click happened. Even it is working, if we reload or change the page. now only issue in first time render.

[azharuddin-mulla-amla]

Hey @azharuddin-mulla-amla - could you share a reproduction repo? This sounds environment specific.

You may be able to force the render by disabled the iframe.waitForStyles API: https://puckeditor.com/docs/api-reference/components/puck#iframe

you can replicate this issue by slow down the network call to Slow 4G network.

[chrisvxd]

Unfortunately I cannot reproduce it with a Slow 4G network on https://demo.puckeditor.com. Is it possible that something in your page JS bundle is spooking the environment?

Analysing the network tab might yield clues.