Design pattern for dashboard components and state refresh

I'm building a SPA with React as the front end. It basically consists of a dashboard-like page with 3 separate (but semi-connected) components. The components are:

  1. a messages/notifications area - user interaction consists of clicking a button to "dismiss" any of the messages
  2. an area with form inputs, buttons and lots of user interaction
  3. a datagrid with inline editing capabilities

Crude Wireframe: enter image description here

The content of all 3 is derived from a combination of:

  • user interaction/input on the page
  • info fetched from the backend API.

2-way binding is in place, so the UI state as it pertains to the former is already taken care of. It's the latter I'm writing this post about.

Other users using the app at the same time may cause changes to the backend that need to be reflected as immediately as possible in all 3 components in order to create the experience of them being "live". I am considering 2 approaches:

  1. query the backend on a set interval to check for updates for all components
  2. query the backend for changes to the active component when it becomes active/focused (i.e. the one the user has just clicked inside of)

And I guess there's a third option of doing both.

I'm conflicted regarding #2.... will a split second of latency in the first click on the component EVERY TIME be frustrating for the user? or is it more frustrating to be working on something within the component and be interrupted for that split second while state is updated?

Tags: , , , , , ,