Web UI crashes when large collection updated via API

[petermenocal]

When using the JS SDK to update a large number of collection items, the web UI at app.flamelink.io will completely crash and freeze. Experience has been repeatable in both Safari and Firefox on MacOS.

I've attached a video of the behavior. In this clip, you'll see the interface responsive, the API request sent, and finally the interface frozen.

Steps to reproduce:

• Create a collection with a large-ish number of items (around 800 were contained in the collection in question)
• Log into the web ui at app.flamelink.io and open your list of items
• Update each of those collection items via the API
• Web UI will now be completely inoperable for all logged in users.

This is presumably happening because the entire list of items is loaded into that paginated table and listened to with the realtime subscriber. Is there a way we can disable this somehow to increase performance for large collections that get updated?

Video of issue: https://user-images.githubusercontent.com/22479535/126672010-e4775b96-57b8-46ac-b054-e5f22d2da26b.mov

[gitdubz]

Hi,

For large collection updates does the same happen when doing updates using batch updates? https://firebase.google.com/docs/firestore/manage-data/transactions#web-v8_2

[petermenocal]

I'm using the real-time database which I don't believe has batched updates like Firestore.

[gitdubz]

Ah okay. So on our end, how we handle large collection updates for RTDB is to only update the app state (referring to react & redux) when the last item in the list of updates is done. This way the UI does not do 800 re-renders, it only does 1.

This is however not controllable via the SDK/API since the app will respond to each update as if it is not a bulk operation.

The only way this can potentially be achieved is if a bulk operation is provided on the SDK which would take all the updates and apply it as 1 single update to the RTDB object.

You could do this yourself using the raw Firebase functionality. https://firebase.google.com/docs/database/web/read-and-write#update_specific_fields

firebaseApp
  .database()
  .ref('flamelink/environments/production/content/schemaKey/en-US')
  .update({ 
    '1234567890': { 
      __meta__: { 
        lastModifiedBy: 'yourUserId', 
        lastModifiedData: new Date().toISOString() 
      }, 
      ... 
    },
    '0987654321': { ... }
  })

NOTE: You would need to handle the lastModifiedBy and lastModifiedDate values