After hitting publish, not all styles initially publish

After hitting “publish update” on a page, sometimes certain styles do not initially publish.

A few seconds later the “publish update” button turns green again (as if you made new changes, even though you didn’t). If you then hit “publish update” a second time, all styles will then be applied and publish.

It seems like some code is running in the background after hitting the initial publish that actually doesn’t end up getting picked up by the initial publish.

It’s not a major issue if you’re aware of it and wait around to make sure you don’t need to hit publish a second time, but for folks who are unaware or exit a page quickly it’s easy to end up publishing live content without its appropriate styles.

Hi @john! :wave:t2:

Thanks for taking the time to reach out about this issue.

Would you mind providing the link to a Builder page this is occurring on? We’d be happy to take a look.

Hey Maddy - no problem!

In terms of a specific page, it looks like it can happen on any page.

A very arbitrary example would be: https://thedailytext.co/dash

Builder editor version: https://builder.io/content/58fde43fbc174f6eb427a6bf9abf2de0

Here are screenshots illustrating an example of it happening:

  1. After hitting publish, button returns to “publish update” without any new changes:

  2. Mobile view has updated content but incorrect font:

  3. Hit publish again and then button stays a published:

  4. Refresh mobile page and it now has the correct font:

Note: I think the styles not appearing properly might be specific to mobile versions of a page (although I’m not 100% sure).

Thanks for providing more details!

I will pass this along to our engineering team so they can take a look. We will keep you updated.

Hey John,

Thanks for your patience! I wanted to follow-up with you about the behavior you experienced in Builder:

  • Builder is working in the background for optimization, so in the scenario where you published a page and came back and saw “publish update” available, it could be something such as an image that Builder was able to optimize.

  • When publishing your pages, the changes might not be immediate due to caching. Usually those changes will take effect in a few minutes after refreshing the page. If you’d like to learn more about one of the techniques we use, check out: https://web.dev/stale-while-revalidate/

Feel reach to reach out if you have any additional questions!

Thanks for the response Kara!

It does seem like it is related to background operations that Builder is performing (specifically related to mobile style rendering), but some of the things that are missed in the initial publish are more than just optimizations (i.e. it will publish with the wrong font on mobile).

I don’t think this is a caching issue, since these changes will not take effect unless you hit publish again (no matter how long you wait).

It looks like what’s happening is (1) you hit publish (2) builder runs operations that do not get captured in that publish (3) certain core styles are missing unless you hit publish again

Hey John,

Just wanted to clarify that stale while revalidate caching doesn’t care how long you wait, it cares how long you refresh/visit a page. So this likely explains why you might not see the update right away even after revisitng the page a little while later.

As for the fonts, when you say that the wrong font is showing initially on mobile, is that an older font you were using in a previous version or a random font not associated with your styling?

I should have been more specific here too. The background operations don’t take effect regardless of how many times you visit / refresh a page as well. You must hit publish again for the changes to take effect.

The wrong font is a random font not associated with my styling (i.e. this happens even when I don’t change the font). It looks like it’s a fallback font.

Another common issue is mobile margins don’t appear correctly (even if I don’t make changes to margins) unless I hit publish multiple times.

Here’s a better example page:

  1. Last time I hit publish on this page was Sept 9 (only hit publish once; no new changes since then)

  2. Wrong font currently appearing on mobile (have visited and refreshed the page multiple times since Sept 9; the correct font previously appeared fine and was not changed in the last publish; the actual updates / changes like new copy are reflected)

  3. Hit publish again (despite no changes since last publish); refresh editor page; hit publish again

  4. Font now appears properly on mobile

Note: I’ve noticed recently, you now typically have to (1) hit publish a second time (2) refresh editor (3) hit publish a third time to fix the issue now.

Here’s the URL for that page: https://thenewpaper.co/e_02 (currently published with proper styles)

Hey John, would you mind DM’ing me the page url (builder.io/content…) in Builder as well? Thanks!