I have several large YDocs (~1 to 4MB in size) that each represent world state. I would like to show a “progress bar” to help the user know when to anticipate entering the world[1].
I currently have two issues:
When using the on('sync', () => {...}) event, the event seems to be triggering too soon, and the document is not fully loaded. Am I correct in assuming that when I receive the sync event, I should be able to access all of the array elements and objects in the YDoc?
I’d like to know when “pieces” of the document are loaded, preferably as the websocket streams operations on the YDoc, until the YDoc is “current” with the server’s version. Is there a way to see “inside” the update process here and show progress until “loaded”?
Small update regarding the sync event: I notice that ydoc.store.clients.size == 1 even before I connect to the server. Could this be related? I would expect clients.size to be zero?
When you use y-websocket, the sync event is called after the client synced with the y-websocket server. It is not that the sync event is called too soon. Probably, the server is loading some data from the database after it initially synced with the client. Then it will propagate the update after the sync.
The sync is just one big update. If the update is 4MB in size, it might take some time to load it from the network. Then the process will be blocked for some time until Yjs parsed and loaded the document to memory. You could create a streaming y-websocket alternative that gives you a progress bar. Alternatively, you could use something like y-indexeddb to reduce the overhead when syncing a second time.
I assume that ydoc.store.clients is not empty because you applied some updates to the local document before syncing with the server.