lumino: suspend views that are not displayed

[oliver-sanders]

Cylc views continue to update, even if they are backgrounded (i.e. obscured by another tab). This is inefficient, but hopefully avoidable.

We are already using the lumino:showevent to determine when a tab is foregrounded:

https://github.com/cylc/cylc-ui/blob/f70d4227d06d876430ca56c2130bf49584da39ea/src/components/cylc/workspace/Widget.vue#L50

What can we do to suspend Vue's event loop for these components?

Would this even be enough? E.G, the graph view makes use of the JS global event look via setTimeout.

[MetRonnie]

We could detect a widget hide event: https://lumino.readthedocs.io/en/latest/api/variables/widgets.Widget.Msg.AfterHide.html

There is an example of doing the opposite (detecting the show event) here: https://github.com/cylc/cylc-ui/blob/ea7bbbcbc674109f102d1424076fa064a8843f86/src/components/cylc/workspace/luminoWidget.js#L85-L86

[oliver-sanders]

Perhaps we should auto-provision a computed property for the show/hide status of a tab and let the views themselves handle this.

I'm not sure there's a clean way to suspend a Vue component tree with timers and more.

Note, raising this in relation to a bug #1282 which is caused by the view updating whilst hidden (probs resulting in some kind of offset in element bbox calculations). However, this should have broader efficiency advantages too.