Don't render when code ahead

[Rheeseyb]

Problem:
When making code changes, we'll cause the canvas to re-render twice: once when the code is changed; and then a second time once the parsed model has caught up.

Fix:
Specifically check if any code is ahead before triggering a canvas render. To do this I used the existing shouldRerender in editor.tsx, but realised that was actually a bit of a misnomer, and was gating logic that it shouldn't be. So I have explicitly used the relevant boolean checks around the individual parts of the code called after a dispatch.

Note that I have completely removed the check around editorDispatchClosingOut. I'm very much certain that we should never have been gating that with a check that something had changed, as the internal logic of that function is already checking that something actually changed before e.g. triggering a save.

My only concern with this was that if you are typing fast enough it would prevent the canvas from rendering until you paused briefly, because we don't change the revisions state following a parser-printer update if the update is stale here:

utopia/editor/src/core/shared/parser-projectcontents-utils.ts

Lines 100 to 109 in 67abcdd

	if (updateIsStale) {
	// if the received file is older than the existing, we still allow it to update the other side,
	// but we don't bump the revision state.
	updatedFile = textFile(
	textFileContents(code, updatedContents, existing.fileContents.revisionsState),
	existing.lastSavedContents,
	isParseSuccess(updatedContents) ? updatedContents : existing.lastParseSuccess,
	existing.versionNumber,
	)
	} else {

However, in practice, even on the hydrogen project this never happened, because the IndexedDB polling part which forms the code-editor-to-utopia communication channel is slower than parsing the code. So I then added a 600ms pause in the parsing to force the code updates to come through faster, which meant updating the canvas only happened when you stopped typing, and even in that forced case it actually didn't feel bad.

Manual Tests:
I hereby swear that:

• I opened a hydrogen project and it loaded
• I could navigate to various routes in Preview mode

[github-actions]

Try me

[relativeci]

#13351 Bundle Size — 62.64MiB (-0.02%).

aa79ac5(current) vs 6339ece master#13350(baseline)

Warning

Bundle contains 70 duplicate packages – View duplicate packages

Bundle metrics   7 changes 1 regression 1 improvement

	Current #13351	Baseline #13350
Initial JS	45.71MiB(~+0.01%)	45.71MiB
Initial CSS	0B	0B
Cache Invalidation	19.24%	21.6%
Chunks	31(+3.33%)	30
Assets	34(+3.03%)	33
Modules	4371(-0.07%)	4374
Duplicate Modules	521(-0.57%)	524
Duplicate Code	31.68%(-0.06%)	31.7%
Packages	469	469
Duplicate Packages	70	70

Bundle size by type   2 changes 2 improvements

	Current #13351	Baseline #13350
JS	62.63MiB (-0.02%)	62.65MiB
HTML	11.16KiB (-0.33%)	11.2KiB

---

Bundle analysis report Branch fix/dont-render-when-code-ahead Project dashboard

[Rheeseyb]

I noticed that shouldRerender was actually very badly named here, and so changed some of the gating of the code below accordingly. It's worth expanding the diff below to understand what is actually happening now

[balazsbajorics]

:narrows_eyes: the original code assumes that it only makes sense to run the dom-walker if there was a canvas render. is that assumption false?

[Rheeseyb]

shouldRerender was a bit of a misnomer, especially as it was gating logic that should run regardless of if that canvas rendered (e.g. the editorDispatchClosingOut at the end). There are cases where it makes sense to run the dom-walker without a canvas render (e.g. navigating to a different route). But that being said, the below condition should actually be somethingChanged || runDomWalker so I'll fix that.

[Rheeseyb]

I updated it to shouldRerender || runDomWalker in the end

[balazsbajorics]

hmmm, but shouldRerender is already const shouldRerender = (somethingChanged || runDomWalker) && !anyCodeAhead(dispatchResult.unpatchedEditor.projectContents), aren't you defeating the anyCodeAhead check then?

[Rheeseyb]

The dom walker should run whenever the canvas is rendered, hence the shouldRerender check, but it should also run when we explicitly ask it to (e.g. when the editor is in play mode and the user has navigated to a different route), hence the || runDomWalker.