CSS sometimes fails to load for Blocklists

[kmeilander]

Which Umbraco.Community.BlockPreview version are you using?

5.3.2

Which Umbraco version are you using? For example: 10.4.0 - don't just write v10

17.2.2

Bug summary

I upgrade from Umbraco 16 to Umbraco 17, and now my blocklist preview don't always include the CSS. I see the HTML elements, but the css fails to load for all the elements causing things to look wrong.

I have not been able to find out any consistent reason for why they fail but here are some patterns i've seen:

• Only seems to happen on larger pages with 5-10+ blocks on a page. In this case some blocks will load as expected but others will not have the CSS included when I inspect the element.
• Locally everything always seems to work.
• Clearing the browser cache on every request generally everything loads.
• After editing the content of a block it always works.
• clicking back and forth between the content tabs, which will require all the items to re-load, generally re causes the issue.

Steps to reproduce

I'm unable to figure out exact steps to always reporduce it, but in general the issue is loading the blocklist item in the backoffice fails to load the CSS so the styles don't show.

I would expect it to load the styles and show the preview every time.

Expected result / actual result

No response

[kmeilander]

It looks like the issue is that the /umbraco/block-preview/api/v1/preview/list/stylesheets call for the block is not done loading when the block content is returned (/umbraco/block-preview/api/v1/preview/list) so when it renders the block, there is no css to render for it.

Here you can see a waterfall of chrome inspection of the requests. And you can see that only 5 css requests were loaded before the content requests were finished, and so i got 5 blocks that previewed correctly.

I'm not sure why the block preview component now loads the CSS for each block separately, (i'm guessing there are plans to make this css configurable per block), but i think the fix is to make it so the UI re-renders after the CSS loads too. I think this can be done by adding

 @state()
private _styleElements: HTMLLinkElement[] = [];

BlockPreview/src/Umbraco.Community.BlockPreview.UI/src/blockEditor/block-list-preview.custom-view.element.ts

Line 56 in e0a57ea

private _styleElements: HTMLLinkElement[] = [];

This was the fix AI told me to do, I think it make sense but I'll let someone with more JavaScript experience chime in on if that makes sense.

If this is the issue, it probably also should be added to the grid component too.

BlockPreview/src/Umbraco.Community.BlockPreview.UI/src/blockEditor/block-grid-preview.custom-view.element.ts

Line 56 in e0a57ea

private _styleElements: HTMLLinkElement[] = [];