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(
websocket,
`${room}`,
doc )
wsProvider.on('synced', () => {
display()
})
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.