How can I tell when an initial load is complete

I have an app whose basic structure looks like this:

const doc = new Y.Doc()
const yNodesMap = doc.getMap('nodes')
const yEdgesMap = doc.getMap('edges')
let displayed = false

wsProvider = new WebsocketProvider(
		doc )
wsProvider.on('synced', () => {

yNodesMap.observe((evt) => {
 	// do something with the observed changes that takes a relatively long time 
	// and store the result
yEdgesMap.observe((evt) => {
 	// do something with the observed changes that takes a relatively long time 
	// and store the result

function display() {
	if (!displayed) {
		displayed = true
		// show the user the results

(Note this is a schematic of the structure of code that is actually a lot more involved)

Usually, this works fine, but if the initial update is large (>2 MB or so), display() gets called before the observes have finished, so what is displayed is incomplete.

I’m looking for a solution that calls display() only after the initial load has been completed. I suppose I could use a timeout, but it would be a hack, and it is not clear how long the timeout should be. An event that occurs after the whole initial load has finished and been processed would be the ideal.

Once the client has received the initial data, further transactions take place, for example,

yNodesMap.set('first', 'node1')
yEdgesMap.set('first', 'edge1')

by this and the other clients.

I’m just guessing here and I make a lot of assumptions:

The problem is probably that your y-websocket backend(?) sends “sync step 2” before the document is loaded from y-leveldb(??). That is a known bug of the y-leveldb integration.

A fix would be to fix the y-leveldb integration. Another solution would be to wait for some nodes to render before you render the editor.

Ah! Thank you @dmonad . So my puzzlement about what is going on is due to a bug - that’s reassuring in a way - at least I haven’t got entirely the wrong mental model. Is there a published issue describing the bug? Or any more clues about it?