Approaches to hiding flash of unstyled content while syntax tree parsing

I’m having an issue with a brief flash of unstyled content when changing document via view.setState.


With three-ish paragraphs of content, the tree will be available almost instantly. With four+ paragraphs, it will take a minimum of 500ms, and the flash is obvious/annoying, especially if it causes any layout shifting.

I think this is down to @codemirror/language -> requesIdle using a timeout fixed to 500ms. Checking the performance tab, There’s maybe only 100ms of work being done during this time (depending on how long the document is).

Is there a way to allot more work/increase the worker frequency, even at the cost of responsiveness for syntax parsing?

The other option I can see would be hiding the editor/content until syntaxTreeAvailable returns true, but I don’t think the user experience is as nice with that half-second minumum.

I think the answer is ensureSyntaxTree followed by dispatching an empty transaction.

I think this isn’t possible in my codepen because it’s not using @codemirror/language 0.19.9 yet.

Yes, that’s currently the only way. Though be careful not to create an annoyingly long parsing pause when the document is large.

I guess I should add a helper utility function for this to make it less obscure.

I think a quick note about the dispatch in or near the ensureSyntaxTree docs would also work.